CSS3 3D转换

目录

前言

一、三维坐标系

二、3D转换

3D转换知识要点：

1.3D 位移：translate3d(x, y, z)

2.3D 旋转：rotate3d(x, y, z)

3.透视：perspctive

4.3D呈现 transfrom-style

总结

---

前言

我们平时生活的环境是3D的，那么如何让3D的东西在2D上呈现呢？照片就是3D物体在2D平面呈现很好的一个例子。
特点：
1、近大远小
2、物体后面遮挡不可见
当我们在网页上构建3D效果的时候参考这些特点就能产生3D效果。

一、三维坐标系

三维坐标系 其实就是指立体空间，立体空间是由三个轴共同组成。
x轴:水平向右 x向右为正 左为负值
Y轴 垂直向下 y向下为正 上为负值
Z轴 垂直屏幕 往外面是正值 往里面是负值。

二、3D转换

3D转换知识要点：

1.3D 位移：translate3d(x, y, z)

在2D的基础上多增加了一个可移动的方向，z轴方向。

语法：

translform:translateX(100px)仅在X轴上移动
translform:translateY(100px)仅在Y轴上移动
translform:translateZ(100px)仅在Z轴上移动
translfotm:translate3d(x,y,z)其中 x、y 、z表示分别要移动的轴的方向的距离。
xyz是