CSS3如何制作酷炫的3D旋轉透視

CSS3如何制作酷炫的3D旋轉透視，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

超過10余年行業(yè)經驗，技術領先，服務至上的經營模式，全靠網(wǎng)絡和口碑獲得客戶，為自己降低成本，也就是為客戶降低成本。到目前業(yè)務范圍包括了：成都網(wǎng)站制作、做網(wǎng)站，成都網(wǎng)站推廣，成都網(wǎng)站優(yōu)化，整體網(wǎng)絡托管，微信小程序開發(fā)，微信開發(fā)，重慶APP軟件開發(fā)，同時也可以讓客戶的網(wǎng)站和網(wǎng)絡營銷和我們一樣獲得訂單和生意！

立方體 3D 旋轉

3D 透視照片墻

跳躍的音符

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

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

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

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

transform-style

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

CSS Code復制內容到剪貼板

1. // 語法：   

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

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

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

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

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

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

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

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

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

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

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

1、準備六個正方形

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

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

2、父容器做簡單的變換

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

CSS Code復制內容到剪貼板

1. .cube-container{   

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

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

4. }  

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

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

3、對每個面做 3D 變換

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

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

為了更有立體感，我們可以調整父容器的旋轉角度，旋轉看上去更立體的角度:

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

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

就不再詳細討論如何一步一步得到這兩個了，有興趣的可以去我的 github 上看看源碼，或者直接和我討論交流，簡單的談談思路：

正四面體

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

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

球體

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

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

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

persepective

CSS Code復制內容到剪貼板

1. // 語法   

2. perspective: number|none;  

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

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

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

perspective-origin

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

CSS Code復制內容到剪貼板

1. // 語法   

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

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

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

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

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

CSS Code復制內容到剪貼板

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

2. perspective-origin: 50% 50%;   

3. -webkit-perspective: 100px;   

4. perspective: 100px;  

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

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

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

3D 透視照片墻

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

代碼就不貼了，本文已經很長了，只是簡單的談談原理，感興趣的去扒源碼看看。

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

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

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

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

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

看完上述內容，你們掌握CSS3如何制作酷炫的3D旋轉透視的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

本文名稱：CSS3如何制作酷炫的3D旋轉透視
標題路徑：http://bm7419.com/article2/jdseoc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、營銷型網(wǎng)站建設、品牌網(wǎng)站設計、小程序開發(fā)、商城網(wǎng)站、網(wǎng)站設計公司

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)