空间转换 3D（位移，透视，旋转）+ 动画（定义，调用，动画属性）

目录

空间转换

1.  3D坐标系

2.  3D位移

3.  透视

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

4.  3D旋转

4.1  rotateX

4.2   rotateY

4.3   左手法则

5.  立体呈现

动画

1.   定义

2.   调用

3.   动画属性

3.1  鼠标经过暂停动画

3.2  多组动画

---

空间转换

1.  3D坐标系

 

X轴往右是正值，往左是负值。

Y轴往下是正值，往上是负值。

Z轴指向我们是正值，反之负值。

2.  3D位移

完整写法：

 transform: translate3d(x, y, z);

分开写：

transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(100px);

3.  透视

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

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

2. 一定给父亲添加

3. 透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。

语法：

 perspective: 800px;

                  其中 d 为透视的距离

                  z 是 translateZ