摘要：之前張?chǎng)涡癫┛蛯懙男Чv解得不錯(cuò)啊，既然是大神，應(yīng)該能搜出點(diǎn)什么，結(jié)果一搜，還真有。參考感謝張?chǎng)涡襁@篇文章好吧，變換，不過如此還有一篇寫得不錯(cuò)的，幫助理解和屬性最后引用張?chǎng)涡竦囊痪湓捈兇鈴木W(wǎng)上些效果代碼，那永遠(yuǎn)就是的命咯

昨晚在做慕課網(wǎng)的十天精通CSS3課程，其中的綜合練習(xí)是要做一個(gè)3D導(dǎo)航翻轉(zhuǎn)的效果。非常高大上。

以往這些效果我都很不屑，覺得網(wǎng)上一大堆這些特效的代碼，復(fù)制粘貼就好了，夠快。但是現(xiàn)實(shí)工作中，其實(shí)自己寫出來，比你網(wǎng)上找代碼要快很多，因?yàn)槟闶遣粫?huì)才去找代碼粘過來的。那么你就要去看哪些代碼需要用，哪些不需要。而如果是自己寫的話，哪里漏了什么，再去查，明顯快些，如果很熟練，寫得就更快了。

這些常見特效真要讓我自己寫出來，竟然束手無策。坐在電腦前開始懷疑之前學(xué)的前面幾章節(jié)的CSS3包括以往學(xué)的CSS3知識(shí)都是什么鬼，自己沒能力寫出這個(gè)效果我有啥資格不屑這些特效呢？然后參考了下答案，發(fā)現(xiàn)單純做完上面的CSS3基礎(chǔ)題，是完成不了這個(gè)練習(xí)的。換言之，就像FCC的個(gè)別綜合題一樣，你需要自己去查一下其他知識(shí)并應(yīng)用起來，才能完成。

看了下，一大堆兼容前綴，還有幾個(gè)陌生的屬性：perspective是什么？transform-style？preserve-3d？translateZ？？

簡(jiǎn)直黑人問號(hào)臉，虧我還自認(rèn)為對(duì)CSS3很熟悉了，以為只要會(huì)用transform的4種變換和transition就足夠了。。

難怪7月初面試前端，面試官問我CSS3的知識(shí)時(shí)我感覺自己的回答是在CSS3的邊緣行走。。。

然后就去找啊。。之前張?chǎng)涡癫┛蛯懙膌oading效果講解得不錯(cuò)啊，既然是CSS大神，應(yīng)該能搜出點(diǎn)什么，結(jié)果一搜perspective，還真有。而且其他的屬性全都提到。

于是。。原本是打算做導(dǎo)航3D翻轉(zhuǎn)效果的，看文章看得起勁，做了個(gè)效果湊合的3D旋轉(zhuǎn)木馬出來。。。以前的我也是覺得這個(gè)效果好屌，好難，看完文章發(fā)現(xiàn)，難度還能接受。

其實(shí)有猶豫過還要不要寫文章來總結(jié)，大神已經(jīng)寫了這么有趣這么好的文章了，我再寫不是浪費(fèi)時(shí)間嗎。。而且現(xiàn)在還哪有人寫個(gè)關(guān)于特效的文章啊。。但我還是寫了。。作為今天學(xué)習(xí)的一個(gè)總結(jié)也好。還有，這篇文章沒有教你寫任何一個(gè)具體的特效。

假如喜歡大神的有趣講解，可以點(diǎn)擊這里。

本文就不廢話了，直接開始。（"廢話已經(jīng)夠多了好嗎！"）

rotateX rotateY rotateZ
translateZ
perspective
transform-style: prserve-3d

學(xué)別人寫3D特效，首先你得要有3D概念啊！

何為3D，3D就是立體。是幾何概念。

雖然數(shù)學(xué)是我的弱項(xiàng)，空間思維也不強(qiáng)，但反復(fù)思考，還是能弄懂的。

港真，盡管大神生動(dòng)地為rotateX rotateY rotateZ 3種屬性各舉一例，然而我就是沒懂rotateZ，好尷尬。。飛刀特技表演和把妹子抱床上側(cè)躺。。。我還是無法理解。。。

如果你能理解，就可以跳過下面那些直接到下一個(gè)講解。
如果和我一樣有點(diǎn)懵逼，你可以看下下面那幅圖。請(qǐng)無視我的畫工。

如果你還是不懂，不怕，那就聽聽我的故事吧。

當(dāng)時(shí)，我開始有點(diǎn)急躁，懷疑人生了，看到桌上一支筆。終于懂了，上天還是會(huì)可憐一下笨蛋的。

把筆橫向拿著，拿出食指圍繞它轉(zhuǎn)圈，這就是rotateX
把筆豎起來拿著，拿出食指圍繞它轉(zhuǎn)圈，這就是rotateY

最讓我困惑的就是rotateZ，其實(shí)就是你把筆指向自己（當(dāng)然你不指向自己指向?qū)γ嬉残?。。），然后同樣地拿出食指圍繞它轉(zhuǎn)圈。這我才明白飛鏢和妹子側(cè)躺那張圖的意思（哎喲，這智商。。）

3D變換的第一個(gè)重點(diǎn)知識(shí)。

perspective即望遠(yuǎn)鏡，透視的。

這個(gè)屬性剛開始接觸，覺得好深?yuàn)W，太抽象了。

那就結(jié)合demo來看，假設(shè)：

背景色為白色的是父元素，背景色為黃色的是子元素
在父元素上設(shè)置perspective為100
對(duì)子元素設(shè)置45度正向翻轉(zhuǎn)rotate(45deg)

效果如圖：

然后我把perspective調(diào)大，改成300，效果如圖：

結(jié)論：
perspective取值越小,3D效果就越明顯,也就是你的眼睛越靠近真3D。

因此，perspective你可以理解為視距。

現(xiàn)在我們假設(shè)perspective是固定的，50px。

我們通過設(shè)置不同的translateZ，來看看結(jié)合著理解。

html代碼：

css代碼：

效果：

我們可以發(fā)現(xiàn)，translateZ越大，該元素離我們眼睛越近，當(dāng)其大于等于perspective時(shí)，就會(huì)從肉眼消失。

這里要注意perspective所在位置，即書寫方法。

1）寫在舞臺(tái)元素中(即父元素)：就是上面我們寫的那種
2）寫在子元素中：transform( perspective(50px), translateZ(30px))

兩種寫法區(qū)別在于子元素是否拿同一個(gè)東西作為參照物，是的話，改變perspective這個(gè)大神那篇文章寫得很仔細(xì)了，這里就省略了。

為什么說簡(jiǎn)單，你看它語法。。就兩個(gè)值。。

transform-style: flat | preserve-3d

為什么說重要，因?yàn)樗J(rèn)值是flat。意味著該元素的所有子元素不具備3D效果，你加了什么perspective，加了很復(fù)雜很華麗的transform都沒用，設(shè)置的是flat值，就全都得變2D，所有子元素都只能以平展形式呈現(xiàn)在眼前，什么？你想要看怎么個(gè)平展法？

好吧，那下面我就通過實(shí)例讓你們知道這個(gè)transform-style屬性的厲害。

首先是旋轉(zhuǎn)木馬原本效果。

然后去掉transform-style: preserve-3d，接下來的畫面可能會(huì)引起情緒不安，請(qǐng)?jiān)诩议L陪同觀看。

"哇！好丑！"

所以說這個(gè)屬性，簡(jiǎn)單但很重要。不要忘加了。

PS：不能為了防止子元素溢出容器而設(shè)置overflow值為hidden啊，如果設(shè)置了overflow:hidden同樣會(huì)導(dǎo)致子元素出現(xiàn)在同一平面（和元素設(shè)置了transform-style為flat一樣的效果）。

寫到這里，3D變換常用的屬性也說完了，屬性很少，難就難在比較抽象，需要花點(diǎn)時(shí)間理解。其實(shí)還有些屬性沒有提到，例如透視屬性backface-visibility:hidden，設(shè)置為hidden則無法看穿了。

第一次一口氣寫這么長的一篇文章，其實(shí)一開始我是拒絕的，在前端工程化、各種前端開發(fā)框架盛行的現(xiàn)在，我覺得已經(jīng)沒有多少人再去研究CSS3這方面知識(shí)了，但很多人卻都在簡(jiǎn)歷上說自己精通CSS3（當(dāng)然，我的簡(jiǎn)歷沒有這么寫哈），平時(shí)就算遇到特效，沒有網(wǎng)上找代碼，他們大多也是從自己整理好的demo庫里找出來復(fù)制粘貼（注意，不是寫好，是整理好的而已），但是想想一天下來，從看文章理解，到自己寫特效，再到總結(jié)知識(shí)點(diǎn)，梳理3D變換套路。。。

折騰了這么久，不寫點(diǎn)東西感覺對(duì)不起自己啊，雖然確實(shí)有點(diǎn)累，但收獲還是挺多的，起碼不會(huì)再怕3D變換了，我知道CSS3水很深，3D變換也是，很多坑需要在寫特效時(shí)才會(huì)遇到。

突然有點(diǎn)忘記剛剛自己寫了啥了，那順便寫個(gè)小結(jié)吧。

首先是perspective，視距，這個(gè)屬性要寫在父元素上，設(shè)置用戶和元素3D空間的Z平面距離。視距perspective越小，3D效果越明顯，肉眼離Z屏面距離越近。

然后就是translateZ，值越大，證明越靠近你的眼睛。當(dāng)超過了perspective設(shè)置的值時(shí)就會(huì)消失，它只是太大，大到你看不見而已。

最后就是要在父元素的子元素中設(shè)置transform-style:preserve-3d，表明子元素需要用到3D空間，不設(shè)置的話如何3D變換也會(huì)變?yōu)?D平展。

感謝張?chǎng)涡襁@篇文章：
好吧，CSS3 3D transform變換，不過如此！
還有一篇寫得不錯(cuò)的，幫助理解：
Transform-style和Perspective屬性

最后引用張?chǎng)涡竦囊痪湓挘?/p>

純粹從網(wǎng)上copy些效果代碼，那永遠(yuǎn)就是copy的命咯！