一：空间转换3D
1 3D坐标系 3D坐标系比2D多一个Z轴 一定要记住3个坐标轴取值的正反：
X 轴 往右越大，是正值， 否则反之 Y 轴 往下越大，是正值，否则反之 Z轴 （指向我们）越大，是正值，否则反之
二.3D位移 完整写法： transform: translate3d(x, y, z); 只不过在很多情况下，我们经常喜欢分开写： transform: translateX(100px); transform: translateY(100px); transform: translateZ(100px);
三.透视 透视的作用： 空间转换时，为元素添加近大远小、近实远虚的视觉效果 语法： perspective: 800px;
透视注意事项：
取值范围经常在 800px ~ 1200px 之间。
一定给父亲添加
透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。
其中 d 为透视的距离
z 是 translateZ 的距离， 这个距离靠近我们，盒子越大
四.3D旋转 有了透视的加持，我们3d旋转效果会比较明显。
1 rotateX
类似单杠旋转。 注意：默认的旋转中心在盒子的中心位置。 body { /* 父级添加透视 */ perspective: 400px; }
img { transition: all 1s; }
img:hover { transform: rotateX(360deg); }
五.左手法则 大拇指指向X轴正向方（右）， 则四指指向的方向是旋转的方向 大拇指指向Y轴正向方（下）， 则四指指向的方向是旋转的方向
六.立体呈现 让子盒子在父盒子内有空间的展示，此时可以给父亲添加 transform-style: preserve-3d;
第二、动画（重点）
动画最大的特点可以不用鼠标触发，自动的，反复的执行某些动画。
动画使用分为定义和调用：
-
定义的动画 @keyframes dance {
from { transform: scale(1) }
to { transform: scale(1.5) } }
-
调用 img { width: 200px;
-
使用动画 animation: 动画名称 执行时间; infinite 循环 animation: dance .5s infinite; }
动画属性
动画名字参照css类选择器命名 动画时长和延迟时间别忘了带单位 s infinate 无限循环动画（重复次数） alternate 为反向 就是左右来回执行动画（跑马灯） forwards 动画结束停留在最后一帧状态， 不循环状态使用 linear 让动画匀速执行
鼠标经过暂停动画
鼠标经过box， 则 ul 停止动画 .box:hover ul { animation-play-state: paused; }
多组动画 我们想要2个动画一起执行 animation: 动画1, 动画2, ... 动画n animation: run 1s steps(12) infinite, move 5s linear forwards;
