变形：

盒子变形不会影响另一个盒子

位移：

transform:translate(50px,50px);

沿Z轴旋转360度：

transform:rotate(360deg);

缩放：

transform:scale(0.5,0.2);

斜切

transform: skew(45deg,0);

transform:skew(0,45deg);

---

旋转：

旋转方向判断

1、X轴向右、Y轴向下、Z轴向屏幕外

2、让轴向对着自己，顺时针方向就是该轴向的旋转方向

设置盒子按3D空间显示：

transform-style:preserve-3d;

默认沿Z轴旋转

transform: rotate(45deg);

perspective设置透视距离，经验数值800比较符合人眼的透视效果

transform: perspective(800px) rotateX(45deg);

---

变形中心点：

设置变形的中心点

div:nth-child(1){

       transform-origin:left center;

}

---

背面可见：

设置盒子按3d空间显示

transform-style:preserve-3d;

设置透视距离、三维旋转的初始角度

transform:perspective(800px)rotateY(0deg);

设置盒子背面是否可见

backface-visibility:hidden;

---

animation动画：

动画名称、时间、曲线、延迟、播放次数、结束后是否返回、动画前后的状态

infinite不限制次数

alternate动画结束后返回，返回也算次数

animation-fill-mode 动画前后的状态

forwards动画完成保持在最后一帧

backwards在延迟时间内，在动画显示之前，应用from开始属性值（例如box宽100，from宽200，在延迟1s内显示200）

  both向前和向后填充模式都被应用（例如起始按200，结束停在最后一帧）

动画暂停：

animation-play-state: paused;

动画运行：

animation-play-state:running;

定义一个动画，名称为moving：

@keyframes moving{

初始状态

from{

}

结束状态

to{

}

 }