摘要：之前張鑫旭博客寫的效果講解得不錯啊，既然是大神，應該能搜出點什么，結果一搜，還真有。參考感謝張鑫旭這篇文章好吧，變換，不過如此還有一篇寫得不錯的，幫助理解和屬性最后引用張鑫旭的一句話純粹從網上些效果代碼，那永遠就是的命咯

昨晚在做慕課網的十天精通CSS3課程，其中的綜合練習是要做一個3D導航翻轉的效果。非常高大上。

以往這些效果我都很不屑，覺得網上一大堆這些特效的代碼，復制粘貼就好了，夠快。但是現實工作中，其實自己寫出來，比你網上找代碼要快很多，因為你是不會才去找代碼粘過來的。那么你就要去看哪些代碼需要用，哪些不需要。而如果是自己寫的話，哪里漏了什么，再去查，明顯快些，如果很熟練，寫得就更快了。

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

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

簡直黑人問號臉，虧我還自認為對CSS3很熟悉了，以為只要會用transform的4種變換和transition就足夠了。。

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

然后就去找啊。。之前張鑫旭博客寫的loading效果講解得不錯啊，既然是CSS大神，應該能搜出點什么，結果一搜perspective，還真有。而且其他的屬性全都提到。

于是。。原本是打算做導航3D翻轉效果的，看文章看得起勁，做了個效果湊合的3D旋轉木馬出來。。。以前的我也是覺得這個效果好屌，好難，看完文章發現，難度還能接受。

其實有猶豫過還要不要寫文章來總結，大神已經寫了這么有趣這么好的文章了，我再寫不是浪費時間嗎。。而且現在還哪有人寫個關于特效的文章啊。。但我還是寫了。。作為今天學習的一個總結也好。還有，這篇文章沒有教你寫任何一個具體的特效。

假如喜歡大神的有趣講解，可以點擊這里。

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

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

學別人寫3D特效，首先你得要有3D概念?。?/p>

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

雖然數學是我的弱項，空間思維也不強，但反復思考，還是能弄懂的。

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

如果你能理解，就可以跳過下面那些直接到下一個講解。
如果和我一樣有點懵逼，你可以看下下面那幅圖。請無視我的畫工。

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

當時，我開始有點急躁，懷疑人生了，看到桌上一支筆。終于懂了，上天還是會可憐一下笨蛋的。

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

最讓我困惑的就是rotateZ，其實就是你把筆指向自己（當然你不指向自己指向對面也行。。），然后同樣地拿出食指圍繞它轉圈。這我才明白飛鏢和妹子側躺那張圖的意思（哎喲，這智商。。）

3D變換的第一個重點知識。

perspective即望遠鏡，透視的。

這個屬性剛開始接觸，覺得好深奧，太抽象了。

那就結合demo來看，假設：

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

效果如圖：

然后我把perspective調大，改成300，效果如圖：

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

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

現在我們假設perspective是固定的，50px。

我們通過設置不同的translateZ，來看看結合著理解。

html代碼：

css代碼：

效果：

我們可以發現，translateZ越大，該元素離我們眼睛越近，當其大于等于perspective時，就會從肉眼消失。

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

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

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

為什么說簡單，你看它語法。。就兩個值。。

transform-style: flat | preserve-3d

為什么說重要，因為它默認值是flat。意味著該元素的所有子元素不具備3D效果，你加了什么perspective，加了很復雜很華麗的transform都沒用，設置的是flat值，就全都得變2D，所有子元素都只能以平展形式呈現在眼前，什么？你想要看怎么個平展法？

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

首先是旋轉木馬原本效果。

然后去掉transform-style: preserve-3d，接下來的畫面可能會引起情緒不安，請在家長陪同觀看。

"哇！好丑！"

所以說這個屬性，簡單但很重要。不要忘加了。

PS：不能為了防止子元素溢出容器而設置overflow值為hidden啊，如果設置了overflow:hidden同樣會導致子元素出現在同一平面（和元素設置了transform-style為flat一樣的效果）。

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

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

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

突然有點忘記剛剛自己寫了啥了，那順便寫個小結吧。

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

然后就是translateZ，值越大，證明越靠近你的眼睛。當超過了perspective設置的值時就會消失，它只是太大，大到你看不見而已。

最后就是要在父元素的子元素中設置transform-style:preserve-3d，表明子元素需要用到3D空間，不設置的話如何3D變換也會變為2D平展。

感謝張鑫旭這篇文章：
好吧，CSS3 3D transform變換，不過如此！
還有一篇寫得不錯的，幫助理解：
Transform-style和Perspective屬性

最后引用張鑫旭的一句話：

純粹從網上copy些效果代碼，那永遠就是copy的命咯！