一、空间转换3D

1.3D坐标系

3D 坐标系比2D 多了一个Z轴。

理解X,Y,Z坐标轴取值的正反：

X 轴往右越大，是正值；往左越小，是负值。
Y 轴往下越大，是正值；往上越小，是负值。
Z轴（指向我们）越大，是正值；指向反面越小，是负值。

2. 3D位移

transform: translate3d(x, y, z); 大部分情况下分开写： transform: translateX(100px); transform: translateY(100px); transform: translateZ(100px);

3.透视

作用：空间转换时，为元素添加近大远小、近实远虚的视觉效果。语法：perspective: 800px; 透视注意事项：

取值范围经常在 800px ~ 1200px 之间。
一定给父亲添加
透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。
- 其中 d 为透视的距离
- z 是 translateZ 的距离，这个距离靠近我们，盒子越大。

4. 3D旋转

作用：有了透视的加持，我们3d旋转效果会比较明显。

4.1 rotateX

类似单杠旋转。注意：默认的旋转中心在盒子的中心位置。

后羿效果

4.2 rotateY

类似钢管舞。后羿效果

5.左手法则

方法识别：

1.大拇指指向X轴正向方（右），则四指指向的方向是旋转的方向 2.大拇指指向Y轴正向方（下），则四指指向的方向是旋转的方向

6. 立体呈现

让子盒子在父盒子内有空间的展示，此时给父亲添加语法：transform-style: preserve-3d;

二、动画（重点）

与浮动的区别：浮动仅仅让两个状态进行动画效果；动画则是不用鼠标出发，可自动、循环执行某些动画。

1.定义：

① @keyframes dance {

from {
    transform: scale(1)
}

to {
    transform: scale(1.5)
}

} ② @keyframes dance {

   0% {
    transform: scale(1)
  } 

  100% {
    transform: scale(1.5)
  }
}

2.调用

img { width: 200px; /* 2. 使用动画 animation: 动画名称执行时间; infinite 循环*/ animation: dance .5s infinite; }

3.动画属性

动画名字参照css类选择器命名
动画时长和延迟时间别忘了带单位 s
infinate 无限循环动画
alternate 为反向就是左右来回执行动画（跑马灯）
forwards 动画结束停留在最后一帧状态
linear 让动画匀速执行

3.1 鼠标经过暂停动画（搭配伪类hover使用）

.box:hover ul { animation-play-state: paused; }

3.2 多组动画

/* 我们想要2个动画一起执行 animation: 动画1, 动画2, ... 动画n */

animation: run 1s steps(12) infinite, move 5s linear forwards;

3D空间转换旋转/动画效果