CSS3 | 3D转换

三维坐标系

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

• x轴：水平向右 注意： x 右边是正值，左边是负值
• y轴：垂直向下 注意： y 下面是正值，上面是负值
• z轴：垂直屏幕 注意： 往外面是正值，往里面是负值

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 分别指要移动的轴的方向的距离
• xyz是不能省略的，如果没有就写0      transform: translate3d(0, 10px, 10px