CSS 3D的应用记录

为父元素添加以下样式后，子元素即可使用3D属性，例如translateZ

/*设置子元素也应用3D效果*/
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;

/*设置旋转角度*/
-webkit-transform: rotateY(60deg);
-moz-transform: rotateY(60deg);
transform: rotateY(60deg);



为元素直接设置3D属性时候，记得一定要设置摄像机的位置：perspective，否者translateZ不会生效。

transform: perspective(1000px) translateZ(100px);