css3-3D特效

2D页面即是在浏览器中开发的页面，

3D可以比喻浏览器为窗口，透过浏览器看到3D物体

一、设置3D场景

　　perspective:800【3D世界中的物体距3D场景的距离800px】

　　perspective-origin:50% 50%【从浏览器观察的入口，X轴50%,Y轴50%，即从场景中央透过场景看3D世界】

　　

二、展示3维效果

　　使用transform属性调整元素

　　因为transfrom也适应于2D场景中，所以为了使用浏览器知道此transfrom用于3D场景需要首页设置transfrom属性

transfrom-style:preserve-3d

　　——translate【位移操作】

　　　　· translateX(x px)

　　　　· translateY(y px)

　　　　· translateZ(z px)

　　——rotate【旋转操作】

　　　　· rotateX(x deg)

　　　　· rotateY(y deg)

　　　　· rotateZ(z deg)

　　在浏览器3D世界中

　　　　X轴向右是正方向，Y轴向下是正方向 ，Z轴向外【指向我们】的是正方向