一.空间转换
1.是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同
2.语法
transform: translate3d(x, y, z);
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);
3.属性（添加给父级）
perspective:
取值：像素单位数值， 数值一般在800 – 1200。
作用
空间转换时，为元素添加近大远小、近实远虚的视觉效果
4.左手法则
判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
5.transform-style: preserve-3d
盒子父元素添加transform-style: preserve-3d；
按需求设置子盒子的位置（位移或旋转）
二.动画
1.使用animation添加动画效果
定义动画 @keyframes 动画名称{
from {}
to{}
}
使用动画
animation :动画名称 动画花费时长.
2.动画属性
animation-name
动画名称
animation
-duration
动画时长
animation
-delay
延迟时间
animation-fill-mode
动画执行完毕时状态
forwards：最后一帧状态
backwards：第一帧状态
animation-timing-function速度曲线
steps(数字)：逐帧动画
animation-iteration-count
重复次数
infinite为无限循环
animation-direction
动画执行方向
alternate为反向
animation-play-state
暂停动画
paused为暂停，通常配合:hover使用
