1.1 3D转换

介绍：我们生活的环境是3D的，照片就是3D物体在2D平面呈现的例子。

3D的特点：

近大远小。

物体后面遮挡不可见

当我们在网页上构建3D效果的时候参考这些特点就能产出3D效果。

1.三维坐标系

三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。

x轴：水平向右 注意： x 右边是正值，左边是负值

y轴：垂直向下 注意： y 下面是正值，上面是负值

z轴：垂直屏幕 注意： 往外面是正值，往里面是负值

2.3D转换

3D 转换我们主要学习工作中最常用的 3D 位移 和 3D 旋转

主要知识点

          3D位移: translate3d(x,y,z

        3D旋转: rotate3d(x,y,z)

        透视: perspective

        3D呈现 transfrom-style

注意：3D空间给父级影响的是子元素

3D  移动 translate3d

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

        translform:translateX(100px)：仅仅是在x轴上移动

        translform:translateY(100px)：仅仅是在Y轴上移动

        translform:translateZ(100px)：仅仅是在Z轴上移动（注意：translateZ一般用px单位）

        transform:translate3d(x,y,z)：其中 x、y、z 分别指要移动的轴的方向的距离

        因为z轴是垂直屏幕，由里指向外面，所以默认是看不到元素在z轴的方向上移动