CSS3如何制作酷炫的3D旋轉(zhuǎn)透視

CSS3如何制作酷炫的3D旋轉(zhuǎn)透視，相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

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

3D 透視照片墻

跳躍的音符

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

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

所以本文接下來(lái)要講的大概有：

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

transform-style

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

CSS Code復(fù)制內(nèi)容到剪貼板

1. // 語(yǔ)法：   

2. transform-style: flat|preserve-3d;   

3. transform-style: flat; // 默認(rèn)，子元素將不保留其 3D 位置   

4. transform-style: preserve-3d; // 子元素將保留其 3D 位置。  

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

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

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

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

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

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

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

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

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

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

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

2、父容器做簡(jiǎn)單的變換

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

CSS Code復(fù)制內(nèi)容到剪貼板

1. .cube-container{   

2.     -webkit-transform: rotateX(-33.5deg) rotateY(45deg);   

3.     transform: rotateX(-33.5deg) rotateY(45deg);   

4. }  

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

嗯，這個(gè)時(shí)候，6 個(gè) div 面仍然是重疊在一起的。

3、對(duì)每個(gè)面做 3D 變換

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

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

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

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

嗯，沒(méi)有按住躁動(dòng)的心，立馬動(dòng)手嘗試了一番，最后做出了下面的兩個(gè)：

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

正四面體

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

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

球體

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

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

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

persepective

CSS Code復(fù)制內(nèi)容到剪貼板

1. // 語(yǔ)法   

2. perspective: number|none;  

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

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

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

perspective-origin

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

CSS Code復(fù)制內(nèi)容到剪貼板

1. // 語(yǔ)法   

2. perspective-origin: x-axis y-axis;   

3. // x-axis : 定義該視圖在 x 軸上的位置。默認(rèn)值：50%   

4. // y-axis : 定義該視圖在 y 軸上的位置。默認(rèn)值：50%  

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

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

CSS Code復(fù)制內(nèi)容到剪貼板

1. -webkit-perspective-origin: 50% 50%;   

2. perspective-origin: 50% 50%;   

3. -webkit-perspective: 100px;   

4. perspective: 100px;  

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

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

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

3D 透視照片墻

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

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

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

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

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

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

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

看完上述內(nèi)容，你們掌握CSS3如何制作酷炫的3D旋轉(zhuǎn)透視的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！