之前學(xué)習(xí) react+webpack ，偶然路過 webpack 官網(wǎng) ，看到頂部的 LOGO ，就很感興趣。

最近覺得自己 CSS3 過于薄弱，想著深入學(xué)習(xí)一番，遂以這個 LOGO 為切入口，好好研究學(xué)習(xí)了一下相關(guān)的 CSS3 屬性。webpack 的 LOGO 動畫效果乍看不是很難，深入了解之后，覺得內(nèi)部其實大有學(xué)問，自己折騰了一番，做了一系列相關(guān)的 CSS3 動畫效果。

先上 demo ，沒有將精力放在兼容上，請用 chrome 打開。

本文完整的代碼，以及更多的 CSS3 效果，在我github上可以看到，也希望大家可以點個 star。

嗯，可能有些人打不開 demo 或者頁面亂了，貼幾張效果圖：（圖片有點大，耐心等待一會）

立方體 3D 旋轉(zhuǎn)

3D 透視照片墻

跳躍的音符

可能上面的效果對精通 CSS3 的而言小菜一碟，寫本文的目的也是我自己學(xué)習(xí)積累的一個過程，感興趣的就可以一起往下看啦。

其實 CSS3 效果真的很強(qiáng)大，上面的效果都是純 CSS 實現(xiàn)，個人感覺越是深入 CSS 的學(xué)習(xí)，越是覺得自己不懂 CSS ，不過話說回來，這些效果的實用場景不大，但是作為一個有追求的前端，我覺得還是有必要去好好了解一下這些屬性。

所以本文接下來要講的大概有：

transform-style:preserve-3d三維效果perspective andperspective-origin 3D視距，透視/景深效果CSS3filter CSS3濾鏡transparent、radial-gradient 透明與漸變

transform-style

要利用 CSS3 實現(xiàn) 3D 的效果，最主要的就是借助transform-style 屬性。transform-style 只有兩個值可以選擇：

當(dāng)我們指定一個容器的transform-style 的屬性值為preserve-3d 時，容器的后代元素便會具有 3D 效果，這樣說有點抽象，也就是當(dāng)前父容器設(shè)置了preserve-3d 值后，它的子元素就可以相對于父元素所在的平面，進(jìn)行 3D 變形操作。

當(dāng)父元素設(shè)置了 transform-style:preserve-3d 后，就可以對子元素進(jìn)行 3D 變形操作了，3D 變形和2D 變形一樣可以，使用 transform 屬性來設(shè)置，或者可以通過制定的函數(shù)或者通過三維矩陣來對元素變型操作：

1、使用translateX(length) 、translateY(length) 、 translateZ(length) 來進(jìn)行 3D 位移操作，與 2D 操作一樣，對元素進(jìn)行位移操作，也可以合并為translate3d(x,y,z) 這種寫法；

2、使用scaleX() 、scaleY() 、scaleY() 來進(jìn)行3D 縮放操作，也可以合并為 scale3d(number,number,number)這種寫法；

3、使用rotateX(angle) 、rotateY(angle) 、rotateZ(angle) 來進(jìn)行 3D 旋轉(zhuǎn)操作，也可以合并為rotate3d(Xangle,Yangle,Zangle) 這種寫法。

對于 API 的學(xué)習(xí)，我建議去源頭看看，不要滿足于消費別人的總結(jié)，transform-style API。

這里要特別提出的，3D 坐標(biāo)軸，所謂的繞 X、Y、Z 軸的三個軸，這個不難，感覺空間想象困難的，照著 API 試試，繞每個軸都轉(zhuǎn)一下就明白了：

了解過后，那么依靠上面所說的，其實我們就已經(jīng)可以做一個立方體出來了。所謂實踐出真知，下面就看看該如何一步步得到一個立方體。

1、準(zhǔn)備六個正方形

這個好理解，正方體六個面，首先用 div 做出 6 個面，包裹在同一個父級容器下面，父級容器設(shè)置transform-style:preserve-3d ，這樣接下來就可以對 6 個面進(jìn)行 3D 變換操作，為了方便演示，我用 6 個顏色不一樣的面：

上面的圖是示意有 6 個面，當(dāng)然我們要把 6 個正方形 div 設(shè)置為絕對定位，重疊疊在一起，那么應(yīng)該是這樣的，只能看到一個面：

2、父容器做簡單的變換

為了最后的看上去的效果好看，我們需要先對父容器進(jìn)行變換，運用上面說的rotate 屬性，將容器的角度改變一下：

那么，變換之后，得到這樣一個圖形：

嗯，這個時候，6 個 div 面仍然是重疊在一起的。

3、對每個面做 3D 變換

接下來就是對每個面進(jìn)行 3D 變換了，運用 rotate 可以對div 平面進(jìn)行旋轉(zhuǎn)，運用 translate 可以對 div 平面進(jìn)行平移，而且要記住現(xiàn)在我們是在三維空間內(nèi)變換，轉(zhuǎn)啊轉(zhuǎn)啊，我們可能會得到這樣的形狀：

算好旋轉(zhuǎn)角度和偏移距離，最后上面的 6 個面就可以完美拼成一個立方體咯！為了效果更好，我給每個面增加一些透明度，最后得到一個完整的立方體：

為了更有立體感，我們可以調(diào)整父容器的旋轉(zhuǎn)角度，旋轉(zhuǎn)看上去更立體的角度:

至此，一個 3D 立方體就完成了。寫這篇文章的時候，本來到這里，這一塊應(yīng)該就結(jié)束了，但是寫到這里的時候，突然突發(fā)奇想，既然正方體可以（正六面體），那么正四面體，正八面體甚至球體應(yīng)該也能做出來吧？

嗯，沒有按住躁動的心，立馬動手嘗試了一番，最后做出了下面的兩個：

就不再詳細(xì)討論如何一步一步得到這兩個了，有興趣的可以去我的 github 上看看源碼，或者直接和我討論交流，簡單的談?wù)勊悸罚?/p>

正四面體

和正方體一樣，我們首先要準(zhǔn)備 4 個三角形（下面會詳細(xì)講如何利用 CSS3 制作一個三角形 div），注意 4 個三角形應(yīng)該是重疊在一起的，然后將其中三個分別沿著三條邊的中心點旋轉(zhuǎn) 70.5 度（正四面體臨面夾角），就可以得到一個正四面體。

注意沿著三條邊的中心點旋轉(zhuǎn) 70.5 度這句話，意思是每個圖形要定位一次旋轉(zhuǎn)中心，也就是transform-origin 屬性，它允許我們設(shè)置旋轉(zhuǎn)元素的基點位置。

球體

上面的 GIF 圖因為添加了 animation 動畫效果，看上去很像一個球體在運動，其實只用了 4 個 div，每個 div 利用 border-radius:100% 設(shè)置為圓形，然后以中心點為基準(zhǔn)，每個圓形 div 繞 Y 軸旋轉(zhuǎn)不同的角度，再讓整個圓形容器繞 Y 軸動起來，就可以得到這樣一個效果了。

perspective andperspective-origin 3D視距，透視/景深效果

繼續(xù)說 3D ，接下來要說的屬性是 persepective 和 perspective-origin 。

persepective

perspective 為一個元素設(shè)置三維透視的距離，僅作用于元素的后代，而不是其元素本身。

簡單來說，當(dāng)元素沒有設(shè)置 perspective時，也就是當(dāng) perspective:none/0 時所有后代元素被壓縮在同一個二維平面上，不存在景深的效果。

而如果設(shè)置 perspective后，將會看到三維的效果。

perspective-origin

perspective-origin 表示3D 元素透視視角的基點位置，默認(rèn)的透視視角中心在容器是 perspective 所在的元素，而不是他的后代元素的中點，也就是 perspective-origin: 50% 50%。

值得注意的是，CSS3 3D 變換中的透視的透視點是在瀏覽器的前方。

說總是很難理解，運用上面我們做出來的正方體試驗一下，我設(shè)置了正方體的邊長為 50 px ，這里設(shè)置正方體容器 cuber-inner 的persepective 的為 100 px，而 perspective-origin 保持為默認(rèn)值：

上面這樣設(shè)置，也就是相當(dāng)于我站在 100px 的長度外去看這個立方體，效果如下：

通過調(diào)整persepective 和perspective-origin 的值，可以看到不一樣的圖形，這個很好理解，我們觀測一個物體的角度和距離物體的距離不斷發(fā)生改變，我們看的物體也是不一樣的，嗯想象一下小學(xué)課文，楊桃和星星，就能容易明白了。

需要提出的是，我上面的幾個正多面體圖形和球形圖形是沒有加上persepective 值的，感興趣的可以加上試一下看看效果。

3D 透視照片墻

回到文章一開始我貼的那個 3D 照片墻，運用transform-style: preserve-3d 和persepective ，可以做出效果很好的這種 3D 照片墻旋轉(zhuǎn)效果。

代碼就不貼了，本文已經(jīng)很長了，只是簡單的談?wù)勗?，感興趣的去扒源碼看看。

1、設(shè)立一個舞臺，也就是包裹旋轉(zhuǎn)的圖片們的容器，給他設(shè)置一個persepective 距離，以及transform-style: preserve-3d 讓后代可以進(jìn)行 3D 變換；

2、準(zhǔn)備 N 張圖片置于容器內(nèi)部，N 的大小看個人喜好了，圖片的 3D 旋轉(zhuǎn)木馬效果是類似鋼管舞旋轉(zhuǎn)的運動，因此是繞 Y 軸的，我們關(guān)心的是rotateY的大小，根據(jù)我們添加的圖片數(shù)量，用 360° 的圓周角將每個圖片等分，也就是讓每張圖片繞 Y 軸旋轉(zhuǎn)固定角度依次散開：（下面的圖為示意效果，我調(diào)整了一下角度和透明度）

3、這個時候，N 張圖肯定是重合疊在了一起，所以這里關(guān)鍵一步是運用translateZ(length) 讓圖片沿 Z 軸平移，也就是運用translateZ 可以讓圖片離我們更近或者更遠(yuǎn)，因為上一步設(shè)置了圖片不同的rotateY() 角度，所以 N 張圖片設(shè)定一個translateZ 后，圖片就很自然以中點為圓心分散開了，也就是這樣：

4、最后利用 animation ，我們讓舞臺，也就是包裹著圖片的容器繞 Y 軸旋轉(zhuǎn)起來（rotateY），那么一個類似旋轉(zhuǎn)木馬的 3D 照片墻效果就完成了！

這里要注意的一點是設(shè)置的persepective 值和單個圖片translateZ(length) 的值，persepective 一定要比translateZ(length) 的值大，否則就是相當(dāng)于舞臺跑你身后去了，肯定是看不到效果了。

最新評論