by zhangxinxu from http://www.

本文地址：http://www./wordpress/?p=2592

一、寫在前面的秋褲

早在去年的去年，我就大肆介紹了2D transform相關(guān)內(nèi)容?？催^(guò)海賊王的都知道，帶D的家伙都不是好惹的，2D我輩尚可以應(yīng)付，3D的話，呵呵，估計(jì)我等早就在千里之外被其霸氣震暈了~~

看看下圖女帝的動(dòng)作以及神情，就可以知道名字帶D的家伙的厲害！

最近折騰iPad的一些東西，有一些3D效果的交互。有些事情，總以為是遙遠(yuǎn)的未來(lái)，誰(shuí)知真正發(fā)生的時(shí)候說(shuō)來(lái)就來(lái)，比如說(shuō)一顆想結(jié)婚的心，又比方說(shuō)在實(shí)際項(xiàng)目中折騰3D transform效果。

然而，雖然以前折騰過(guò)3D變換效果(webkit)，但都是依葫蘆畫瓢，囫圇吞棗，真正要輕松實(shí)現(xiàn)想要的3D效果，是需要深入理解的，于是，此時(shí)的自己苦逼了，淚奔ing……

木有辦法，找資料，自己思考學(xué)習(xí)唄，當(dāng)我看到下面這張基本圖的時(shí)候，我的右側(cè)的濃眉毛不由自主抖動(dòng)了兩下，呵，呵呵~~

這個(gè)長(zhǎng)得像原子核一樣的是什么東東？那像章魚哥一樣四處橫生的箭頭好嚇人哦！后面怎么還有一個(gè)蒼蠅拍？？ CSS好可怕，我要回去找媽媽……

想必大部分的同行應(yīng)該跟我一樣，沒有愛因斯坦?fàn)敔數(shù)闹巧?，沒有上鏡需要把表摘掉的爸爸。因此，那些術(shù)語(yǔ)連篇的CSS3 3D transform介紹的資料過(guò)于耀眼，無(wú)法直視。怎么辦？

好吧，佛家有云，我不入地獄誰(shuí)入地獄。這里，我就從凡人們的視角說(shuō)說(shuō)CSS3 3D transform的一些東西，希望說(shuō)的東西比較親民，不要嚇著大家。

二、首先，情感化認(rèn)識(shí)

我覺得吧，要想理解一個(gè)東西，最好先有一些感性的認(rèn)識(shí)。

CSS3中的3D變換效果，本質(zhì)上就是我們OOXX時(shí)候各種姿勢(shì)的變換，又稱各種體位的變換。

雖然都是成年人，但考慮到仍有不少窩中待守的雛鳥，如果上面的解釋想不過(guò)來(lái)，就想想以下這些：

1. 下圖的這些人在干嘛？

跳水？NO, No, No!! 記住，他們不是在跳水，是在做3D變換！??！

2. 下圖可愛baby在干嘛？



廣播體操？NO, No, No!! 記住，他不是在做操，是在做3D變換?。?！

3. 來(lái)到2次元，下圖這個(gè)妹子在這幅姿態(tài)稱為：



賣萌？NO, No, No!! 記住，他不是在賣萌，是在做3D變換?。?！

哈哈哈哈，是否意識(shí)到：在顯示世界中，一切的動(dòng)作（包括上面巨乳萌妹所引發(fā)的精蟲上腦），都是屬于3D transform變換。 因此，要學(xué)習(xí)與理解3D transform變換很簡(jiǎn)單，一句話，到現(xiàn)實(shí)世界找個(gè)東西映射一下即可。

三、認(rèn)識(shí)的突破口：rotateX, rotateY, rotateZ

3D transform中有下面這三個(gè)方法：

• rotateX( angle )


• rotateY( angle )


• rotateZ( angle )

理解了這三個(gè)方法，后面更難懂的perspective就好下手了，可以說(shuō)是突破口！

rotate旋轉(zhuǎn)的意思，rotateX旋轉(zhuǎn)X軸，rotateY旋轉(zhuǎn)Y軸，rotateZ旋轉(zhuǎn)Z軸……

什么X軸/Y軸/Z軸，這幾個(gè)詞從我嘴里一出來(lái)，別說(shuō)你們，我自己都暈了~~

趕快，從現(xiàn)實(shí)世界找對(duì)應(yīng)東西理解（參照下面人的旋轉(zhuǎn)）：

鄒凱的體操單杠運(yùn)動(dòng)是rotateX；

蔡依林姐姐的鋼管舞是rotateY；

旋轉(zhuǎn)飛刀的特技表演是rotateZ。

還是理解不過(guò)來(lái)？好吧，假設(shè)你是男的，以你的女朋友舉例，假如原本你和她面對(duì)面站著，然后你——

從正面將其推到就是rotateX；

讓其原地轉(zhuǎn)個(gè)90度欣賞其側(cè)面的豐滿曲線就是rotateY；

把妹子抱到床上側(cè)面躺著就是rotateZ。

于是，下面CSS世界中的簡(jiǎn)單3D效果是不是更容易理解了呢？！

//zxx: 下面為廣告~~注意不要勿點(diǎn)~~嘻嘻~~

四、必不可少的perspective屬性

perspective的中文意思是：透視，視角！

perspective屬性的存在與否決定了你所看到的是2次元的還是3次元的，也就是是2D transform還是3D transform. 這不難理解，沒有透視，不成3D.

我們初中學(xué)美術(shù)，或者學(xué)建筑的同學(xué)肯定接觸過(guò)透視的一些東西：

不過(guò)，CSS3 3D transform中的透視的透視點(diǎn)與上面兩張示例圖是不同的：CSS3 3D transform的透視點(diǎn)是在瀏覽器的前方！

或者這么理解吧：顯示器中3D效果元素的透視點(diǎn)在顯示器的上方（不是后面），近似就是我們眼睛所在方位！

比方說(shuō)，一個(gè)1680像素寬的顯示器中有張美女圖片，應(yīng)用了3D transform，同時(shí)，該元素或該元素父輩元素設(shè)置的perspective大小為2000像素。則這張美女多呈現(xiàn)的3D效果就跟你本人在1.2個(gè)顯示器寬度的地方(1680*1.2≈2000)看到的真實(shí)效果一致??！

五、translateZ幫你尋找透視位置

如果說(shuō)rotateX/rotateY/rotateZ可以幫助理解三維坐標(biāo)，則translateZ則可以幫你理解透視位置。

我們都知道近大遠(yuǎn)小的道理，對(duì)于沒有rotateX以及rotateY的元素，translateZ的功能就是讓元素在自己的眼前或近或遠(yuǎn)。比方說(shuō)，我們?cè)O(shè)置元素perspective為201像素，如下：

perspective: 201px;

則其子元素，設(shè)置的translateZ值越小，則子元素大小越?。ㄒ?yàn)樵剡h(yuǎn)去，我們眼睛看到的就會(huì)變?。?；translateZ值越大，該元素也會(huì)越來(lái)越大，當(dāng)translateZ值非常接近201像素，但是不超過(guò)201像素的時(shí)候（如200像素），該元素的大小就會(huì)撐滿整個(gè)屏幕（如果父輩元素沒有類似overflow:hidden的限制的話）。因?yàn)檫@個(gè)時(shí)候，子元素正好移到了你的眼睛前面，所謂“一葉蔽目，不見泰山”，就是這么回事。當(dāng)translateZ值再變大，超過(guò)201像素的時(shí)候，該元素看不見了——這很好理解：我們是看不見眼睛后面的東西的！

再生動(dòng)的文字描述也不如一個(gè)實(shí)例來(lái)得直觀，您可以狠狠地點(diǎn)擊這里：translateZ方法輔助理解perspective視角demo

建議Chrome瀏覽器下訪問，可以使用range控件，演示效果更贊，如下截圖：-100時(shí)候最小，200時(shí)候超級(jí)滿屏（垂直方向因特殊布局限制沒有顯示），250的時(shí)候因?yàn)樵匾呀?jīng)在視點(diǎn)之外，因此是一片空白（看不見）。

六、perspective屬性的兩種書寫

perspective屬性有兩種書寫形式，一種用在舞臺(tái)元素上（動(dòng)畫元素們的共同父輩元素）；第二種就是用在當(dāng)前動(dòng)畫元素上，與transform的其他屬性寫在一起。如下代碼示例：

.stage {
    perspective: 600px;
}

以及：

#stage .box {
    transform: perspective(600px) rotateY(45deg);
}

您可以狠狠地點(diǎn)擊這里：perspective屬性的兩種書寫demo

結(jié)果如下縮略圖：

從上圖我們貌似可以看到，雖然書寫的形式，屬性名稱不一致，但是，效果貌似是一樣的~~果真是這樣嗎？？？

實(shí)際上不然，上面的demo上下兩個(gè)效果之所以會(huì)一樣，是因?yàn)槲枧_(tái)上只有一個(gè)元素，因此，發(fā)生了巧合，其正好表現(xiàn)一樣了。如果，如果舞臺(tái)上有很多個(gè)元素，則兩種書寫形式的表現(xiàn)差異就會(huì)立馬顯示出來(lái)了！

您可以狠狠地點(diǎn)擊這里：舞臺(tái)多元素下的perspective兩種書寫對(duì)比demo

demo頁(yè)面效果縮略圖如下（因背景色隨機(jī)，可能與下圖有差異）：

好吧，圖中的效果其實(shí)不難理解。上面舞臺(tái)整個(gè)作為透視元素，因此，顯然，我們看到的每個(gè)子元素的形體都是不一樣的；而下面，每個(gè)元素都有一個(gè)自己的視點(diǎn)，因此，顯然，因?yàn)閞otateY的角度是一樣的，因此，看上去的效果也就一模一樣了！

關(guān)于Chrome瀏覽器以及透視盲區(qū)

在Chrome瀏覽器下，要想看到完整的3D效果，還需要3D變換元素正好在窗體的垂直居中位置，因此，在Chrome瀏覽器下，生成了兩個(gè)位置居中的按鈕，幫助您看到想要的效果：

當(dāng)我們改變第一個(gè)range控件值為200的時(shí)候，您會(huì)發(fā)現(xiàn)右側(cè)第三個(gè)元素看不見了：

這不難理解，前面一排門，每個(gè)門都是1米，你距離門2米，顯示，當(dāng)所有門都開了45°角的時(shí)候，此時(shí)，距離中間門右側(cè)的第二個(gè)門正好與你的視線平行，這個(gè)門的門面顯然就什么也看不到。這就是為什么上面右側(cè)第三個(gè)門一片空白的元素——特定的視角以及距離形成的視覺盲區(qū)。

七、理解perspective-origin

perspective-origin這個(gè)屬性超級(jí)好理解，表示你那雙色迷迷的眼睛看的位置。默認(rèn)就是所看舞臺(tái)或元素的中心。有時(shí)候，我們對(duì)中心的位置是不感興趣的，希望視線放在其他一些地方。比方說(shuō)：

一圖勝千言，屌絲男們這個(gè)應(yīng)該都懂的。

下面為立方體的實(shí)際應(yīng)用透視效果圖：

perspective-origin: 25% 75%;

八、transform-style: preserve-3d

transform-style屬性也是3D效果中經(jīng)常使用的，其兩個(gè)參數(shù)，flat|preserve-3d. 前者flat為默認(rèn)值，表示平面的；后者preserve-3d表示3D透視。

preserve-3d符合我們真實(shí)世界的思維認(rèn)識(shí)。比方說(shuō)，你讓妹子右轉(zhuǎn)了45度，此時(shí)妹子腦袋左轉(zhuǎn)45度想你吐舌賣萌，妹子的臉蛋應(yīng)該和你是面對(duì)面平行的。



應(yīng)用transform-style: preserve-3d聲明的元素確實(shí)是這樣表現(xiàn)的，但是，如果使用默認(rèn)的flat值，其效果表現(xiàn)——恕我想象力有限——想不通：妹子的臉還是左轉(zhuǎn)45度的，同時(shí)腦袋似乎移到了身體以外的地方！

因此，基本上，我們想要根據(jù)現(xiàn)實(shí)經(jīng)驗(yàn)實(shí)現(xiàn)一些3D效果的時(shí)候，transform-style: preserve-3d是少不了的。一般而言，該聲明應(yīng)用在3D變換的兄弟元素們的父元素上，也就是舞臺(tái)元素。

九、backface-visibility

在顯示世界中，我們無(wú)法穿過(guò)軟妹A看到其身后的軟妹B或C或D；但是，在CSS3的3D世界中，默認(rèn)情況下，我們是可以看到背后的元素（也不知可不可以透視妹子的衣服~）！

因此，為了切合實(shí)際，我們常常會(huì)這樣設(shè)置，使后面元素不可見：

backface-visibility:hidden;

十、實(shí)際應(yīng)用-圖片的旋轉(zhuǎn)木馬效果

您可以狠狠地點(diǎn)擊這里：圖片的旋轉(zhuǎn)木馬效果demo

建議在足夠新版本的FireFox瀏覽器或Safari瀏覽器下觀看，Chrome可能需要居中定位查看，下圖為效果縮略圖：

原理：

那些看上去很酷酷的CSS3 3D效果其實(shí)就顛來(lái)倒去那幾個(gè)屬性（本文提到的這幾個(gè)），折騰來(lái)折騰去，這里這個(gè)效果顯然也是如此。

首先HTML結(jié)構(gòu)，如下：

舞臺(tái)
    容器
        圖片
        圖片
        圖片
        ...

對(duì)于舞臺(tái)，很簡(jiǎn)單，加個(gè)視距，比方說(shuō)800像素：

 perspective: 800px;

對(duì)于容器，很簡(jiǎn)單，加個(gè)3D視圖聲明，如下：

transform-style: preserve-3d;

然后就是圖片們了。為了不至于產(chǎn)生類似DNA的螺旋狀效果，我們讓所有圖片position:absolute，公用同一個(gè)中心點(diǎn)。

顯然，圖片旋轉(zhuǎn)木馬是類似鋼管舞旋轉(zhuǎn)的運(yùn)動(dòng)，因此，我們關(guān)心的是rotateY的大小。

因?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 ); }

這樣就好了嗎？

No, No, No!!!

想想看那，雖然9個(gè)絕色美女每個(gè)人的方位不一樣，但都站在同一個(gè)點(diǎn)上，早就擠作一團(tuán)，A罩都擠成C了，顯然是不行的（見下圖只設(shè)置rotateY）！我們需要拉開空間~~

如何拉開空間，很簡(jiǎn)單。

想想看那：9個(gè)美女，分別面朝東南西北共9個(gè)不同方位，她們只要每個(gè)人向前走個(gè)4~5步，美女們之間的空間不久拉開了，呈現(xiàn)圓形了！想象一下夜空中，禮花綻開的場(chǎng)景~~

這里的向前走4~5步，聰明的人應(yīng)該已經(jīng)知道了，就是本文提到的translateZ, 當(dāng)translateZ為正值的時(shí)候，元素會(huì)向其面對(duì)的方向走去；如果元素?zé)o旋轉(zhuǎn)，就會(huì)朝顯示器走來(lái)??！

現(xiàn)在只剩下一個(gè)問題了，美女們要向前走多遠(yuǎn)呢？？

這個(gè)距離是有計(jì)算公式滴！

拿本demo距離，每張美女圖片的寬度是128像素，因此，有如下理想方位效果圖：

上圖中紅色標(biāo)注的r就是的demo頁(yè)面中圖片要translateZ的理想值（該值可以讓所有圖片無(wú)縫圍成一個(gè)圓）！

r的計(jì)算很簡(jiǎn)單，有初中數(shù)學(xué)水平的人應(yīng)該都會(huì)：

r = 64 / Math.tan(20 / 180 * Math.PI) ≈ 175.8

demo頁(yè)面為了好看，圖片之間留了點(diǎn)間距，使用的translateZ的值為175.8 + 20 = 195.8.

最后的最后，要讓木馬旋轉(zhuǎn)起來(lái)，只要讓容器每次旋轉(zhuǎn)40度就可以了。

節(jié)省篇幅，具體的JavaScript操作代碼就不展示了，您有興趣可以查看demo頁(yè)面源代碼。

理解了旋轉(zhuǎn)木馬3D效果實(shí)現(xiàn)原理，基本上，其他些3D效果可以輕松駕馭了，因此，本效果還是值得你花功夫看看滴~~

十一、好吧，結(jié)語(yǔ)

理論上，現(xiàn)實(shí)世界，及3次元世界中的各種有規(guī)律的運(yùn)動(dòng)效果都可以使用CSS3 transform 3D方法實(shí)現(xiàn)。文章最后的旋轉(zhuǎn)木馬效果可以說(shuō)是各類千奇百怪效果中的滄海一粟~~其他各類有的沒有的效果就靠你的大腦就構(gòu)想了。至于實(shí)現(xiàn)嘛，理解了，也就都是小菜。但是，要是不理解，純粹從網(wǎng)上copy些效果代碼，那永遠(yuǎn)就是copy的命咯！

文章篇幅已經(jīng)很長(zhǎng)了，我的指頭也敲出老繭來(lái)了，就不再啰嗦什么了。希望本文的嗑叨、賣弄、折騰能夠讓您學(xué)習(xí)CSS3 3D transform變換的相關(guān)東西更加輕松點(diǎn)！

行文倉(cāng)促，文中有錯(cuò)誤在所難免，歡迎諸位指正。最后，感謝閱讀，共同進(jìn)步！

原創(chuàng)文章，轉(zhuǎn)載請(qǐng)注明來(lái)自張?chǎng)涡?鑫空間-鑫生活[http://www.]

本文地址：http://www./wordpress/?p=2592

（本篇完）

如果您覺得本文的內(nèi)容對(duì)您的學(xué)習(xí)有所幫助：

標(biāo)簽： 3d, 3D效果, animate, backface-visibility, css3, perspective, transform, transform-style, transition

這篇文章發(fā)布于 2012年09月7日，星期五，01:05，歸類于 css相關(guān)。                        閱讀 47547 次, 今日 107 次