CSS3D空间与动画内容

1.3D坐标系

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

注意点：3个坐标轴取值的正反

• X 轴 往右越大，是正值，反之为负值

• Y 轴 往下越大，是正值，反之为负值

• Z 轴（指向我们）越大，是正值，反之（指向屏幕内）为负值

---

3D位移

完整语法书写：

不过再很多情况下，我们都会分开书写：

---

透视

透视的作用：空间转换时，为元素添加远近大小、近视远虚的视觉效果。

语法书写：

透视注意事项：

1. 取值范围经常在800px-1200px之间。

2. 一定要给父元素添加。

3. 透视距离也称作为视距，视距是指人的眼睛到电脑屏幕的距离。

其中d为透视的距离

z时translate Z的距离，这个距离靠近我们，盒子越大

---

3D旋转

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

rotateX

类似于单杠旋转。

注意点：默认得旋转中心在盒子的中心位置。

效果展示：

rotateY

该轴的旋转方式类似于钢管舞。

效果如下：

---

左手法则

一定要搞清楚X轴和Y轴是如何旋转的，旋转的度数是正值还是负值。

规则：

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

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

---

立体呈现

让子盒子在父盒子内有空间的展示，此时可以给父元素添加

代码书写：

---

2.动画（重点）

数据在网络上是以很小的单位称为帧（Frame)传输的，帧由几部分组成，不同的部分执行不同的功能

动画最大的特点就是可以不用鼠标触发，自动的，反复的执行某些动画。

动画使用分为定义和调用：

1. 定义：

或者是

2. 调用：

---

动画属性

animation: 动画名字 动画执行时间 动画的速度 延迟时间 循环次数 动画的方向 动画完毕的状态;

animation: move 4s linear 2s infinite alternate forwards;

1. 动画的的名字参照css类选择器命名

2. 动画时长和延迟时间单位都为s

3. infinate 无限循环动画（重复次数）

4. alternate 为反向 就是左右来回执行动画（跑马灯）

5. forwards 动画结束停留在最后一帧状态，不能和循环状态使用

6. linear 让动画匀速执行

注意点：动画结束状态无法和动画的重复次数以及‘
动画的方向一起使用

鼠标经过暂停动画

多组动画

注意：多组动画用“，”隔开