全部用CSS3寫的3D特效，都離不開這些知識

原由

昨晚在作慕課網的十天精通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

rotateX rotateY rotateZ

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

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

雖然數學是個人弱項，空間思惟也不強，但反覆思考，仍是能弄懂的。

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

若是你能理解，就能夠跳過下面那些直接到下一個講解。
若是和我同樣有點懵逼，你能夠看下下面那幅圖。請無視個人畫工。

若是你仍是不懂，不怕，那就聽聽個人故事吧。

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

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

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

好像很難的perspective屬性

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

perspective即望遠鏡，透視的。

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

那就結合demo來看，假設：

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

效果如圖：

而後我把perspective調大，改爲300，效果如圖：

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

所以，perspective你能夠理解爲視距。

translateZ屬性

如今咱們假設perspective是固定的，50px。

咱們經過設置不一樣的translateZ，來看看結合着理解。

html代碼：

css代碼：

效果：

咱們能夠發現，translateZ越大，該元素離咱們眼睛越近，當其大於等於perspective時，就會從肉眼消失。

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

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

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

簡單卻重要的transform-style屬性

爲何說簡單，你看它語法。。就兩個值。。

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的命咯！