css3d

立方体：http://sandbox.runjs.cn/show/1h6zvghj

原理分析：(左负右正)

x:与屏幕水平；（在屏幕上）

y:与屏幕水平方向垂直（在屏幕上）

z:垂直于屏幕（在屏幕外）

 

rotate:顺时针为正，逆时针为负。

translateZ:靠近自己的为正，远离自己的为负。

perspective:一个1680像素宽的显示器中有张美女图片，应用了3D transform，同时，该元素或该元素父辈元素设置的perspective大小为2000像素。则这张美女多呈现的3D效果就跟你本人在1.2个显示器宽度的地方(1680*1.2≈2000)看到的真实效果一致！！

 

舞台---

　　　容器----

　　　　　　元素-----

　　　　　　元素-----

　　　　　　元素-----

　　　　　　元素-----

　　　　　　......

 

舞台：

perspective: 800px;

容器：

transform-style: preserve-3d;

元素：

transform: rotateY( 160deg );