要想實現3D的效果，其實非常簡單，只需指定一個元素為容器并設置transform-style：preserve-3d，那么它的后代元素便會有3D效果。不過有很多需要注意的地方，這里把我學習的方法，過程分享給大家。再講知識點之前，還是先弄清楚3D的坐標系吧，從網上搜了一張經典坐標系圖，供大家回顧一下。

1、3D試圖

　　transform-style：flat(默認，二維效果) / preserve-3d(三維效果)。設置一個元素的transform-style:preserve-3d；只影響這個元素的子元素(如果孫元素也有3d效果，那么還必須給子元素設置preserve-3d)。這樣所有子元素都可以相對與父元素的平面進行3d變形操作。和二維變形一樣，三維變形可以使用transform屬性來設置?？梢酝ㄟ^制定的函數或者通過三維矩陣來對元素變型。列舉幾個函數：

　　translate3d(x,y,z) 使元素在這三個緯度中移動,也可以分開寫，如：translateX(length),translateY(length), translateZ(length)。注意z軸的值只能為px;

　　scale3d(number,number,number) 使元素在這三個緯度中縮放，也可分開寫，如：scaleX(),scaleY(),scaleY()。

　　rotateX(angle) 是元素依照x軸旋轉；

　　rotateY(angle) 是元素依照y軸旋轉；

　　rotateZ(angle) 是元素依照z軸旋轉。

2、透視/景深效果

　　perspective(length) 為一個元素設置三維透視的距離。僅作用于元素的后代，而不是其元素本身。當perspective:none/0;時，相當于沒有設perspective(length)。比如你要建立一個小立方體，長寬高都是200px。如果你的perspective < 200px ，那就相當于站在盒子里面看的結果，如果perspective 非常大那就是站在非常遠的地方看（立方體已經成了小正方形了）。

　　當元素沒有設置perspective(length)時，所有后代元素被壓縮在同一個二維平面上，不存在景深的效果。如果設置perspective(length)后，將會看到三維的效果。默認的透視視角中心在容器(是perspective所在的元素，不是他的后代元素)的中點，也就是perspective-origin: 50% 50%。當然你也可以自己設置，比如：左上角-webkit-perspective-origin: 0px 0px；。

　　綜合以上兩點，我們可以通過幾個實例，來深入了解下perspective(length);  和  transform-style:preserve-3d；

　　?。?）當設置perspective(length);不設置transform-style:preserve-3d；當元素靜止時，會有立體的效果：

　　?。?）當設置perspective(length);不設置transform-style:preserve-3d；當元素旋轉時的效果：

　　　（3）當設置transform-style:preserve-3d；不設置perspective(length);當元素靜止時，不會有立體的效果。

　　?。?）當設置perspective(length);不設置transform-style:preserve-3d；當元素旋轉時的效果：

　　?。?）只有當兩個值都設置，不管是靜止還是旋轉，都會看到立體的效果。

注意：（1）如果一個元素以x軸或y軸旋轉90度以上的話，那么它的背面將面向用戶。背面的元素始終是透明的，所以用戶通過后面看到正面的反向形態(tài)，就像是從在玻璃門后面看對外張貼的標志。為了防止顯示鏡像的前面?？梢詫ackface-visibility設置為hidden;如果backface-visibility:hidden;那么這個元素就不會在背面可見了。這么做的一個原因就是，想一個元素有兩個面，就像一個撲克牌。比如：創(chuàng)建一張撲克牌，正面和背面一定不一樣，這兩個面的位置是背靠背的。這兩個元素一起轉動，正面逐步向后反轉隱藏，同時背面向前反轉并出現。如果背面的元素是可見的，旋轉時它將掩蓋它底下的元素，而不是露出它下面的元素。

　　　（2）如果父元素設置overflow：hidden；那么子元素就無法跳出父元素的平面，也就不能出現3D效果。就如同，transform-style：flat；