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