空间转换
1.空间位移
是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。transform：translate3d （x，y，z）；网页默认显示是2d的，看不到3d效果，可以使用perspective属性看区别效果
2.perspective透视
空间转换时，为元素添加近大远小、近实远虚的视觉效果。 透视，视距，景深 设置给使用了3d元素的父元素（亲爸爸）透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。 取值范围一般为400-1200px
3.空间旋转
语法：transform：rotatez/x/y(值) transform：rotate3d(x, y, z, 角度度数)都可。用rotate实现元素的空间旋转的效果要遵循左手法则：判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
4.立体呈现
属性：transform-style：preserve-3d 使子元素处于真正的3d空间。transform-style：preserve-3d属性是给盒子的父元素添加
动画
属性：使用animation添加动画效果，动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
实现步骤
2.使用动画
animation：动画名称 动画花费时长；
3.动画属性
延迟时间：动画开始之间要等待的时间 s/ms
动画播放次数：infinite 无限次播放
动画播放方向：alternate 交替播放
速度曲线：默认 ease； 1. linear 匀速播放 2. steps(次数)一般配合精灵图使用
执行完毕时的状态：forwards 动画会停在动画结束时的状态；
注意点：
动画名称和播放一次动画的时长必须写，其他属性需要就写
forwards不能和infinite结合使用，否则不生效
animation 里面属性值 不分先后顺序
当属性值里有两个时间，第一个时间永远表示动画时长，第二个表示等待时间
补间动画：动画执行过程中，没有间隔，非常的平滑
使用的速度曲线：默认值为ease； linear匀速的
逐帧动画：一步一步去执行的动画，中间会有间隔
使用的速度曲线：steps(正整数)
逐帧动画又叫精灵动画，逐帧动画常常配合精灵图去使用
