一、空间转换3D

1、3D坐标系

**注意：3个坐标轴取值的正反：
- X 轴 往右越大，是正值， 否则反之
- Y 轴 往下越大，是正值，否则反之
- Z轴（指向我们）越大，是正值，否则反之**   

2、3D位移

语法：

 transform: translate3d(x, y, z);

3、透视

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

 perspective: 800px;

透视相关注意事项：

1. 取值范围一般为800px-1200px。
2. 一定要给父类添加。
3. 透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。
   • 其中d为透视的距离。
   • z 是 translateZ 的距离， 这个距离靠近我们，盒子越大。
   

4. 3D旋转

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

4.1 rotateX

以X轴旋转，但是要注意：默认的旋转中心在盒子的中心位置。
效果如下：

body {
    perspective: 400px;
}

img {
    transition: all 1s;
}

img:hover {
    transform: rotateY(360deg);
}

4.2 rotateY

类似于钢管舞。

body {
    perspective: 400px;
}

img {
    transition: all 1s;
}

img:hover {
    transform: rotateY(360deg);
}

5.立体呈现

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

 transform-style: preserve-3d;

二、动画

动画最大的特点可以不用鼠标触发，自动的，反复的执行某些动画。
动画使用分为定义和调用：
1、定义：

或者是

2、调用

1、动画属性

1.1 鼠标经过暂停动画

1.2 多组动画