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);


如果要设置元素具有3D的效果，那么，要将摄像机假设到它的父元素上，以下设置是设置其摄像机距离多远看子元素。

-webkit-perspective: 1400px;
-moz-perspective: 1400px;
perspective: 1400px;

转载于:https://www.cnblogs.com/zijun/p/9951722.html