轉自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]

一、寫在前面的秋褲

早在去年的去年，我就大肆介紹了2D transform相關內容。看過海賊王的都知道，帶D的家伙都不是好惹的，2D我輩尚可以應付，3D的話，呵呵，估計我等早就在千里之外被其霸氣震暈了~~

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

最近折騰ipad的一些東西，有一些3D效果的交互。有些事情，總以為是遙遠的未來，誰知真正發生的時候說來就來，比如說一顆想結婚的心，又比方說在實際項目中折騰3D transform效果。

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

木有辦法，找資料，自己思考學習唄，當我看到下面這張基本圖的時候，我的右側的濃眉毛不由自主抖動了兩下，呵，呵呵~~

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

想必大部分的同行應該跟我一樣，沒有愛因斯坦爺爺的智商，沒有上鏡需要把表摘掉的爸爸。因此，那些術語連篇的CSS3 3D transform介紹的資料過于耀眼，無法直視。怎么辦？

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

二、首先，情感化認識

我覺得吧，要想理解一個東西，最好先有一些感性的認識。

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

雖然都是成年人，但考慮到仍有不少窩中待守的雛鳥，如果上面的解釋想不過來，就想想以下這些：1.下圖的這些人在干嘛？

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

2.下圖可愛baby在干嘛？廣播體操？NO, No, No!! 記住，他不是在做操，是在做3D變換！?。?/p>

3.來到2次元，下圖這個妹子在這幅姿態稱為：賣萌？NO, No, No!! 記住，他不是在賣萌，是在做3D變換?。?！

哈哈哈哈，是否意識到：在顯示世界中，一切的動作（包括上面巨乳萌妹所引發的精蟲上腦），都是屬于3D transform變換。 因此，要學習與理解3D transform變換很簡單，一句話，到現實世界找個東西映射一下即可。

三、認識的突破口：rotateX, rotateY, rotateZ

3D transform中有下面這三個方法：

• rotateX( angle )
• rotateY( angle )
• rotateZ( angle )

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

rotate旋轉的意思，rotateX旋轉X軸，rotateY旋轉Y軸，rotateZ旋轉Z軸……

什么X軸/Y軸/Z軸，這幾個詞從我嘴里一出來，別說你們，我自己都暈了~~

趕快，從現實世界找對應東西理解（參照下面人的旋轉）：鄒凱的體操單杠運動是rotateX；

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

旋轉飛刀的特技表演是rotateZ。

還是理解不過來？好吧，假設你是男的，以你的女朋友舉例，假如原本你和她面對面站著，然后你——從正面將其推到就是rotateX；

讓其原地轉個90度欣賞其側面的豐滿曲線就是rotateY；

把妹子抱到床上側面躺著就是rotateZ。

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

//zxx: 下面為廣告~~注意不要勿點~~嘻嘻~~

四、必不可少的perspective屬性

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

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

我們初中學美術，或者學建筑的同學肯定接觸過透視的一些東西：

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

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

比方說，一個1680像素寬的顯示器中有張美女圖片，應用了3D transform，同時，該元素或該元素父輩元素設置的perspective大小為2000像素。則這張美女多呈現的3D效果就跟你本人在1.2個顯示器寬度的地方(1680*1.2≈2000)看到的真實效果一致?。?img class="alignnone" title="1680寬度像素顯示器與3D transform視角大小示意" src="http://s1.vevb.com/20150728/bw3mitlvij156.jpg" alt="1680寬度像素顯示器與3D transform視角大小示意 張鑫旭-鑫空間-鑫生活" width="434" height="291" data-src="http://s1.vevb.com/20150728/bw3mitlvij156.jpg" />

五、translateZ幫你尋找透視位置

如果說rotateX/rotateY/rotateZ可以幫助理解三維坐標，則translateZ則可以幫你理解透視位置。

我們都知道近大遠小的道理，對于沒有rotateX以及rotateY的元素，translateZ的功能就是讓元素在自己的眼前或近或遠。比方說，我們設置元素perspective為201像素，如下：

perspective: 201px;

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

再生動的文字描述也不如一個實例來得直觀，您可以狠狠地點擊這里：translateZ方法輔助理解perspective視角demo

建議Chrome瀏覽器下訪問，可以使用range控件，演示效果更贊，如下截圖：-100時候最小，200時候超級滿屏（垂直方向因特殊布局限制沒有顯示），250的時候因為元素已經在視點之外，因此是一片空白（看不見）。