空间转换 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