1.2D转换之移动translate（类似定位）
1.语法
transform:translate(x,y);
transform:translateX(n）；
transform:translateY(n）；
2.重点
1.定义2D转换中的移动沿着X和Y移动元素
2.translate最大的优点，不会影响到其他元素位置
3.translate中的百分比单位是相对于自身的translate:(50%,50%)
4.对行内元素没有效果
1.语法
transform-origin：x y;
2.重点
1.注意后面的参数x和y用空格隔开
2.x和y默认转换的中心点是元素的中心点（50% 50%）
3.还可以给x y设置像素或者方位名词（top bottom left right center）
3.2D转换之缩放scale（可以给元素放大缩小）
1.语法
transform：scale（x,y）;
2.重点
1.注意其中的x y 用逗号分隔
2.transform：scale（2,2）;宽和高放大了两倍
3.transform：scale（2）;宽和高放大了两倍
4.transform：scale（0.5,0.5）;缩小0.5倍
5.最大优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子。
4.2D转换综合性写法
注意：
同时使用多个转换，且格式为：transform：translate（），rotate(),scale()等
其顺序会影响转换的效果
当我们同时有位移和其他属性的时候，要把位移放到最前。
5.CSS3动画
5.1.动画的基本使用
制作动画的步骤
1.定义动画
2.调用动画
语法：用keyframed定义动画（类似定义类选择器）
@keyframes 动画名称{
0%{
width：100px;
}
100%{
width:200px;
}
调用：animation-name:动画名称；
animation-during:持续时间；
5.2动画属性
属性 描述
@keyframes 规定动画
animation 所有动画的简写属性，除了animation-play-state属性
animation-name 限定@keyframes动画的名称（必须的）
animation-duration 规定动画完成一个周期所花费的时间或秒默认为0（必须的）
animation-timing-function 规定动画的速度曲线，默认是ease
animation-delay 规定动画何时开始，默认为0
animation-iteration-count 规定动画播放的次数，默认为1，还可以设置infinite
animation-direction 规定动画是否在下一周逆向播放 ，默认normal,还可以设置alternate逆向
animation-play-state 规定动画是否运行或暂停，默认是running ,还有pasued
animation-fill-mode 规定动画结束后状态保持forwards,回到起始位置backwards
5.3动画简写属性
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束状态
5.4速度曲线调节
值 描述
linear 动画从头到尾匀速
ease 默认，动画以低速开始然后加快到结束变慢
ease-in 动画以低速开始
ease-out 动画以低速结束
ease-in-out 动画以低速开始和结束
steps() 指定函数中的间隔数量（步长）
6.3D转换
1.移动translate3d
transform:translate3d(x,y,z)
2.透视perspective
1.产生的视觉近小远大
2.透视的单位是像素
3.透视写在被观察元素的父盒子上面
3.3D旋转rotate3d
transform:rotateX(deg)沿着X正方向旋转deg度 左手法则，大拇指指向x轴正向
transform:rotateY(deg)沿着Y正方向旋转deg度 左手法则，大拇指指向y轴正向
transform:rotateZ(deg)沿着Z正方向旋转deg度
transform:rotate3d(x,y,z,deg)沿着正方向旋转deg度，其中xyz显示1或0
4.3D呈现transform-style
控制子元素是否开启三维立体环境
transform-style:flat子元素不开启3D空间默认的
transform-style:preserve-3d子元素开启立体空间
代码写给父级，但是影响的是子盒子
这个属性很重要后面必用
