1.所有的3D變換都是基于這張圖的
2.三個變換
rotateX( angle )
rotateY( angle )
rotateZ( angle )
3.perspective屬性
CSS3 3D transform的透視點是在瀏覽器的前方！
或者這么理解吧：顯示器中3D效果元素的透視點在顯示器的上方（不是后面），近似就是我們眼睛所在方位！
4.translateZ幫你尋找透視位置
比如，父元素設置
perspective: 201px;
則其子元素，設置的translateZ值越小，則子元素大小越小（因為元素遠去，我們眼睛看到的就會變小）；translateZ值越大，該元素也會越來越大，當translateZ值非常接近201像素，但是不超過201像素的時候（如200像素），該元素的大小就會撐滿整個屏幕（如果父輩元素沒有類似overflow:hidden的限制的話）。
4.perspective屬性的兩種書寫
perspective
屬性有兩種書寫形式，一種用在舞臺元素上（動畫元素們的共同父輩元素）；第二種就是用在當前動畫元素上，與transform的其他屬性寫在一起。如下代碼示例：
.stage {
perspective: 600px;
}
另一種
#stage .box {
transform: perspective(600px) rotateY(45deg);
}
上面舞臺整個作為透視元素，因此，顯然，我們看到的每個子元素的形體都是不一樣的；而下面，每個元素都有一個自己的視點，因此，顯然，因為rotateY的角度是一樣的，因此，看上去的效果也就一模一樣了！
5.視點位置perspective-origin
6.transform-style: preserve-3d
transform-style屬性也是3D效果中經常使用的，其兩個參數flat|preserve-3d. 前者flat為默認值，表示平面的；后者preserve-3d表示3D透視。
一般而言，該聲明應用在3D變換的兄弟元素們的父元素上，也就是舞臺元素。
7.backface-visibility
在CSS3的3D世界中，默認情況下，我們是可以看到背后的元素
backface-visibility:hidden;
8.demo
CSS3 transform實現圖片旋轉木馬3D瀏覽效果實例頁面
(1)html結構
舞臺
容器
圖片
圖片
圖片
...
（2）對于舞臺，很簡單，加個視距，比方說800像素：
perspective: 800px;
（3）對于容器，很簡單，加個3D視圖聲明，如下：
transform-style: preserve-3d;
（4）為了不至于產生類似DNA的螺旋狀效果，我們讓所有圖片position:absolute，公用同一個中心點。
因為要正好繞成一個圈，因此，圖片rotateY
值正好0~360等分，于是，如果有9張圖片，則每個圖片的旋轉角度累加40(360 / 9 = 40)度即可。因此有
img:nth-child(1) { transform: rotateY( 0deg ); }
img:nth-child(2) { transform: rotateY( 40deg ); }
img:nth-child(3) { transform: rotateY( 80deg ); }
img:nth-child(4) { transform: rotateY( 120deg ); }
img:nth-child(5) { transform: rotateY( 160deg ); }
img:nth-child(6) { transform: rotateY( 200deg ); }
img:nth-child(7) { transform: rotateY( 240deg ); }
img:nth-child(8) { transform: rotateY( 280deg ); }
img:nth-child(9) { transform: rotateY( 320deg ); }
聰明的人應該已經知道了，就是本文提到的translateZ, 當translateZ為正值的時候，元素會向其面對的方向走去；如果元素無旋轉，就會朝顯示器走來！！
：9個美女，分別面朝東南西北共9個不同方位，她們只要每個人向前走個45步，美女們之間的空間不久拉開了，呈現圓形了！想象一下夜空中，禮花綻開的場景~
計算公式
r = 64 / Math.tan(20 / 180 * Math.PI) ≈ 175.8
demo頁面為了好看，圖片之間留了點間距，使用的translateZ
的值為175.8 + 20 = 195.8
.
