要想實現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；
（1）當設定perspective(length);不設定transform-style:preserve-3d；當元素靜止時，會有立體的效果：
（2）當設定perspective(length);不設定transform-style:preserve-3d；當元素旋轉時的效果：
（3）當設定transform-style:preserve-3d；不設定perspective(length);當元素靜止時，不會有立體的效果。
（4）當設定perspective(length);不設定transform-style:preserve-3d；當元素旋轉時的效果：
只有當兩個值都設定，不管是靜止還是旋轉，都會看到立體的效果。
注意：（1）如果乙個元素以x軸或y軸旋轉90度以上的話，那麼它的背面將面向使用者。背面的元素始終是透明的，所以使用者通過後面看到正面的反向形態，就像是從在玻璃門後面看對外張貼的標誌。為了防止顯示映象的前面。可以將backface-visibility設定為hidden;如果backface-visibility:hidden;那麼這個元素就不會在背面可見了。這麼做的乙個原因就是，想乙個元素有兩個面，就像乙個撲克牌。比如：建立一張撲克牌，正面和背面一定不一樣，這兩個面的位置是背靠背的。這兩個元素一起轉動，正面逐步向後反轉隱藏，同時背面向前反轉並出現。如果背面的元素是可見的，旋轉時它將掩蓋它底下的元素，而不是露出它下面的元素。
（2）如果父元素設定overflow：hidden；那麼子元素就無法跳出父元素的平面，也就不能出現3d效果。就如同，transform-style：flat；
最後，把我寫的小例子分享給大家（此例子僅是基於-webkit-核心，如不能**效果，建議換成chrome瀏覽器）。
3D 旋轉立方體
source cube src.js var cube function this.5 function d,e,a if e if a this.1 this.1 function p j,g,b,o this.7 function this.3 function this.4 function ...
3D立方體旋轉
1 首先要知道3d,x軸，y軸，z軸的方向 如圖所示 2 要想做乙個立方體首先是做6個面 以中間為基準 中間向前面平移150px transform translatez 150px 後面也平移150px,然後旋轉 rotatey 180deg 這樣前後面就做完了。左 以中間為準逆時針針旋轉90度 ...
3d實現立方體
3d 俗稱3d變換，指基於3d立體的角度來設定盒子。例如，將盒子設定為立方體。3d的效果跟2d是一樣的，有平移和旋轉，不同點在於，2d只有x軸和y軸，3d會多乙個z軸，用於表示立體。3d的效果通過需要遠距離觀察才能看出立體效果，因為距離太近，我們只能看出平面的2d效果，這就需要在設定3d變換效果之前...