CSS3D转换

3D是有三维坐标系的

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

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

主要学习知识

•      3D位移：translate3d(x,y,z) 
•      3D旋转：rotate3d(x,y,z)
•      透视：perspective
•      3D呈现 transfrom-style

   translate3d 

• 　　transform:translateX(100) 仅仅在x轴上移动
•       transform:translateY(100) 仅仅在y轴上移动
•       transform:translateZ(100) 仅仅在Z轴上移动
•       transform:translate3d(x,y,z) 其中x、y、z 分别指要移动的轴的方向的距离

下面两者效果是一样的：

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