剛接觸完css3的3D變換，感覺確實十分華麗，趁着熱乎勁，把感想和理解記錄下來。如有不對，歡迎指正。

CSS3中提供了2D和3D兩種變換方式，所謂的變換主要就是位移和旋轉，2D和3D的區別大概就是有沒有Z軸方向的變換，僅此而已。

所以，為了后面更好的理解3D變換，我們先說一說2D的變換。

translate()和rotate()

上面兩種方法是2D變換的常用方法，一個對應位移，一個對應旋轉，當然還有其他的，這里就不展開，先只說說這兩個。具體語法是這樣的，比如我們想變換一個div。

#div1{transform:translate(100px,100px);}

#div2{transform:rotate(50deg);}

transform是css3提供的一個屬性，專門用於圖形變換，這個屬性現在可能得到了大部分瀏覽器的支持，但3D效果用到的后面幾種屬性，還是需要做兼容，為了節省時間，討論技術本身，后面就不照顧兼容了。

言歸正傳，上面兩個方法光從參數也很容易理解，translate()是位移方法，分別朝x軸方向，y軸方向移動一段距離，距離可以為負。rotate()是旋轉方法，會繞原點順時針旋轉一個角度。那么問題來了，原點在哪？既然是變換，必須得有參考系，這才有准確的變換效果，所以，無論2D還是3D，找准坐標系，找准坐標系，找准坐標系。因為很重要，所以說三遍。

一般來說，原點默認為元素中心點，當然這個原點也是可以調整的，通過這個屬性 transform-origin:50% 50%; 這里的50% 50%表示的就是中心默認的位置，可以改成其他的，比如說左上角就應該寫成 tansform-origin:0% 0%;  這樣就可以調整原點了。

transform屬性

了解完2D，進階一下，transform屬性同樣可以進行3D變換，簡單來說就是分別針對x,y,z進行設置。

#div1{

　　transform:translateX(100px) translateY(100px) translateZ(100px) rotateX(30deg) rotateY(30deg) rotateZ(30deg);

}

旋轉部分，需要特別說明一下，rotateX()表示繞X軸旋轉的角度，這個變換，整個坐標系會跟着一起旋轉，所以找不到原點得是多糟糕的事情，坐標系永遠是跟隨我們的元素的，每個元素都有自己的坐標，以初始狀態來說，原點在元素中心，x軸正方向從原點水平向右，y軸正方向從原點豎直向下，z軸正方向則是從原點朝向我們的屏幕，也就是說，我們的元素正對的方向就是它自己的z軸方向，這一點千萬要記好。

因為transform歸根結底只是個屬性，所以重復的transform只會覆蓋，縮寫形式就是上面這種，需要注意的是中間用空格隔開而不是逗號。另外，個人理解，transform從中文上來說，應該是“變換成”，而不是“變換”，它表現的是變換完成之后的樣子。

透鏡，模擬出來的3D效果

完成了上面的變換，有3D效果了么，我們看個demo。

這里還沒有進行變換，接下來我們加入變換的屬性。

我們發現，它確實變形了，但是，和我們想象中的3D效果相差甚遠，甚至可以說完全是一個平面效果啊。

其實css3的3D效果，是靠瀏覽器通過計算，渲染，最后模擬出來的一個三維效果。如果要模擬的像，可以欺騙人的眼睛，那必須要考慮一個東西，就是透視，或者說景深，再通俗點就是近大遠小。只有滿足這個，css3的3D變換才有3D的效果，不然即使確實進行了3D變換，瀏覽器也會把它投影成一個平面的，完全沒有3D效果。那怎么給它增加一個透視或者說景深呢，很簡單，一個屬性就可以搞定。

perspective:500；

perspective屬性就是所謂的透鏡屬性，后面的數字單位是像素，用來模擬視角離元素的距離，給最外圍的元素設定好這個屬性，里面的元素在景深方向有所變換時，就能准確表現出近大遠小。

我們來試一下。

OK，完美，一個平面的元素，現在獲得了3D的變換效果，通過幾個div的不同的旋轉變換，和位移，我們很容易就組合出一個正方體，這里的話要注意坐標系會跟着元素一起動的，不過它的Z軸方向一定是div正面朝向的位置，為什么一定要強調正面，是因為3D變換可以讓他旋轉180度，它的背面可以被我們看到，這個時候，Z軸方向就相反了。而正面，就是我們可以放內容的那個面。

透鏡，舞台，組合體

如果我們組合出了一個立方體，想要它動起來，該怎么做？“立方體”是由6個div拼成，每個又有自己獨立的坐標系，通過統籌他們協作變換完成這個效果，想想都讓人覺得不可能。那有沒有簡單的方法，有，給組合體外面套一個div，我們只要旋轉變換它，里面的子元素，自然也跟着旋轉了。所以，在我的理解里，組合體就是一個不能運動的死物，想要動效的話，就得給它們一個“舞台”，我們通過操作舞台，就可以全方位展示，運動我們的組合體。所以我們獲得了一個三層結構，最外層的透鏡，里面的舞台，和舞台里的組合體。在一些大牛的博客里，可能更傾向於把它們叫做“鏡頭”，“空間”和“物體”。這個就是實現3D效果的基礎。

最后一點東西，“保留3D位置”

我最后完成了一個立方體，並用一個div作為舞台包裹了它，想通過旋轉舞台，看看其他角度的立方體，結果出現了這個情況。

立方體變成了一個平面了！為什么會這樣？其實細想一下也很容易理解，div本來就是一個平面元素，所以立方體直接被它“壓扁”了。舞台空間不夠，也就裝不下我們的展示物，所以我們要給舞台擴容，給它添加一個屬性就可以解決這個問題。

transform-style:preserve-3d;

這個屬性的意思是，給子元素保留3D位置，如果你不設定，那就默認不保留，也就是子元素都以平面顯示。

添加完這個屬性我們來看一下。

OK，立方體就出來了。

 

以上就是我對最基礎3D效果的理解，3D效果當然不可能全都這么簡單，有一些東西我沒有涉及，比如perspective-origin，體會不深不敢妄談，而且許多3D技巧我還沒有掌握，后面如果再有所體會，一定分享經驗。