Minren 哥前面已經寫了一些關于這方面的 blog 了，大家也可以在團隊 blog 里面參考。

http://www.ecomenagepro.com/2012/10/the-css3-transform-perspective-property/

介于只是介紹 perspective，沒有對 css 3d transform 其他部分屬性介紹說明，下面是我個人對 css3 3D 的一些個人見解，大神們莫噴。那些 rotateX 啊，scaleY 啊這些大家都能夠立刻明白的我就不過多的解析了。主要有幾個屬性大家可能比較少用或沒有理解透的為這部分的主要內容。

【perspective 和 translate】

perspective 視距。通常我們使用 rotate 來做 3D 旋轉的時候，效果不是很明顯，總感覺差點什么的。而 translateZ 更是沒有任何的效果。原因是，我們沒有為它的父節點添加視距 perspective。使用 perpective 才是真正建立 3D 轉換的核心元素。

那么 perspective 是個什么東西，視距就是你看 3D 物體，眼睛到畫布的距離，而 translate 就是 3D 物體距離源點的距離，下面引用 w3c 的圖解說一下 perspective 和 translateZ 的關系。

簡單的可以得出下面的結論：

1. 沒有 perspective 就沒有真 3D（不是真 33D）

2. 當 perpective 的值越小，3D 效果就越明顯（就是說你眼睛越靠近 33D 就越 3D）

3. 當 perpective 的值無窮大的，值為 0，不寫 perpective，這三種情況的效果一樣。

為切面效果。什么是切面效果，就是前面我說的不是很明顯的 3D 效果，給個圖大家就明白了

幾乎平衡的兩條視線，使到我們看到的 3D 好像被水平投影到顯示器那樣。

4. 還有種特殊情況，perspective 和 translateZ 的值一樣。一圖勝萬語。

perspective 和 translateZ 值相等，男豬腳看到什么了....

【transform-style:preserve-3d】

這個屬性有點蛋疼，沒有像 perspective 效果那么明顯。顧名思義，是建立一個 3D 渲染環境。我們來看看 w3c 的為這個屬性的一段說明：

·?A?3D?rendering?context?is?established?by?a?a?transformable?element?whose?computed?value?for?‘transform-style’?is?‘preserve-3d’,?and?which?itself?is?not?part?of?a?3D?rendering?context.?Note?that?such?an?element?is?always?a?containing?block.?An?element?that?establishes?a?3D?rendering?context?also?participates?in?that?context.

·?An?element?whose?computed?value?for?‘transform-style’?is?‘preserve-3d’,?and?which?itself?participates?in?a?3D?rendering?context,?extends?that?3D?rendering?context?rather?than?establishing?a?new?one.

·?An?element?participates?in?a?3D?rendering?context?if?its?containing?block?establishes?or?extends?a?3D?rendering?context.

 

簡單說：preserve-3d 建立的 3D 渲染環境是對其子節點影響的，使子節點同父節點同一個渲染環境，如果子節點的子節點也帶有preserve-3d屬性就繼承其父節點的。即是建立一個統一的 3D 渲染環境。那同一個3D渲染環境又如何。我們用個例子來說明：

demo 的基本結構和樣式如下代碼

我們看到，被包含的子節點（紅色）使用 rotateX，但是沒有效果。其實不是沒有效果，是效果不明顯。子節點（紅色）的3D旋轉式在容器節點（綠色）的3D渲染環境下發生的。而容器節點沒有perspective，效果就為切面效果

我們為容器節點（綠色）增加 perspective屬性，那樣子節點（紅色）的rotateX效果就出來了，但是注意，現在我們是擁有2個包含關系的3D渲染環境。但是我覺得這不是你所希望的的（除了你有什么特殊癖好或特殊需求）

當容器節點（綠色）使用【transform-style:preserve-3d】后，容器節點（綠色）建立了 3D 渲染環境，嚴格上說是繼承了舞臺（空邊框）的的3D渲染環境。使到子節點的渲染環境都在一個環境上。效果就想我們當初那樣了

查看 Demo 頁面

【transform-origin，perspective-origin，backface-visibilty】

如果理解好前面幾個屬性，這幾個就非常的好理解了。

Backface-visibilty，就是背面的可見性，默認是可見的。想不可見就寫：backface-visibilty:hidden;自己寫一下代碼就好了.

Transform-origin為源點的位置。Rotate和translate都是按照默認的源點轉變的，可以通過transform-origin來改變這個源點位置。

Perspective-origin為視點的位置。就像上面那張解析perspective圖的眼睛的位置。

貞子從你的顯示器里面爬出來的時候就有 3D 效果啦。我們換個視點來一睹貞子姐的容貌。

就是 perspective-origin: right bottom;

。

。

。

。

。

。

。

。

。

。

。

【perspective，preserve-3d，translateZ 之間關系又是怎么的】

點擊理解關系 Demo 頁面

通常我們寫 CSS3?3D 效果的東西，建議 html 結構為：

舞臺 為舞臺加上 perspective

容器 為容器加上 preserve-3d，使到一個容器內為同一 3D 渲染環境

內容 實際 transform 效果

結語：

本來好像還要為大家分享一個 3D?slider 的，但是感覺博文略長略長了，分篇幅，下篇博文在分享一下 css3?3D 的實際使用。