空间转换动画如何实现流畅过渡？

本文共计845个文字，预计阅读时间需要4分钟。

一、空间转换到3D坐标系统：坐标系统2D多了一维Z轴，需要记住三个坐标值的正负。

+X轴：向右大，正值；否则负值。+Y轴：向下大，正值；否则负值。+Z轴（指向我们）：向上大，正值；否则负值。

一，空间转换3D

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

一定要记住3个坐标取值的正反：

X轴往右越大，是正值，否则反之

Y轴往下越大，是正值，否则反之

Z轴（指向我们）越大，是正值，否则反之

3D位移：

有完整写法：

taansform:translate3d(x,y,z);

只不过在很多情况下，我们喜欢分开写：

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

透视

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

语法：

perspective:800px

透视注意事项：

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

2.一定给父级添加

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

3D旋转

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

rotateX

类似单杠旋转

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