#空间转换(3D)
2D包含X,Y轴。3D多了一个Z轴
-
X轴往右越大，是正值/往左越小，是负值
-
Y轴往下越大，是正值/往上越小，是负值
-
Z轴指向自身越大，是正值/反之越小，是负值~
3D位移 写法：
transform: translate3d(x, y, z);
也可以分开写：
transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(100px);
透视
语法： perspective: 800px;
透视的作用：为元素添加近大远小、近实远虚的效果
注意事项：
1.取值800px-1200px
2.给父级添加
3.透视距离也叫视距，其中d为透视的距离，z是translateZ的距离，离我们越近，盒子越大，反之越小。
3D旋转（默认旋转中心在盒子中心）
rotateX 类似单杠旋转 transform: rotateZ(值);
rotateY 类似钢管舞 transform: rotateX(值);
遵循左手原则： 大拇指指向X轴正向方（右）， 则四指指向的方向是旋转的方向
大拇指指向Y轴正向方（下）， 则四指指向的方向是旋转的方向
立体呈现
让子盒子在父盒子内有空间的展示，此时可以给父亲添加
transform-style: preserve-3d; 一键开启3D
动画
第一步，定义动画
@keyframes 动画名字（任意即可，但不可是中文）{ from{ } to{ } }
或者
@keyframes 动画名字 { 0% {} 25%{} 50{} ... 100%{} }
第二步，引用动画
语法：animation：动画名称 时间（单位 s）
动画属性
目标：使用animation相关属性控制动画执行过程
注意：
动画名称和动画时长必须赋值
取值不分先后顺序
如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
目标：使用steps实现逐帧动画
逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果。
animation-timing-function: steps(N)；
将动画过程等分成N份
