手把手教你玩轉 CSS3 3D 技術

時間 2020-02-27

標籤手把手 css3 css 3d 技術欄目 CSS 简体版

原文原文鏈接

css3的3d起步
要玩轉css3的3d，就必須瞭解幾個詞彙，即是透視(perspective)、旋轉(rotate)和移動(translate)。透視便是以現實的視角來看屏幕上的2D事物，從而展示3D的效果。旋轉則再也不是2D平面上的旋轉，而是三維座標系的旋轉，就包括X軸，Y軸，Z軸旋轉。平移同理。css

固然用理論來講明，估計你還不明白。下面是3個gif：html

沿着X軸旋轉css3

沿着Y軸旋轉git

沿着Z軸旋轉github

旋轉應該沒問題了，那理解平移起來就比較容易了，就是在在X軸、Y軸、z軸移動。web

你可能會說透視比較很差理解，下面我介紹一下透視的幾個屬性。瀏覽器

perspective
perspective英文名即是透視，沒有這東西就沒辦法造成3D效果，可是這個東西是怎麼讓咱們瀏覽器造成3D 效果的呢，能夠看下面這張圖，其實學過繪畫的應該知道透視關係，而這裏就是這個道理。動畫

可是在css裏它是有數值的，例如perspective: 1000px這個表明什麼呢？咱們能夠這樣理解，若是咱們直接眼睛靠着物體看，物體就超大佔滿咱們的視線，咱們離它距離愈來愈大，它在變小，立體感也就出來了是否是，其實這個數值構造了一個咱們眼睛離屏幕的距離，也就構造了一個虛擬3D假象。spa

perspective-origin
由上面咱們瞭解了perspective，而加上了這個origin是什麼，咱們前面說的這個是眼睛離物體的距離，而這個就是眼睛的視線，咱們的視點的不一樣位置就決定了咱們看到的不一樣景象，默認是中心，爲perspectice-origin: 50% 50%,第一個數值是 3D 元素所基於的 X 軸，第二個定義在 y 軸上的位置3d

當爲元素定義 perspective-origin 屬性時，其子元素會得到透視效果，而不是元素自己。必須與 perspective 屬性一同使用，並且隻影響 3D 轉換元素。(W3school)

transform-style
perspective又來了，沒錯，它是css中3D的關鍵，transform-style默認是flat，若是你要在元素上視線3D效果的話，就必須用上transform-style: preserve-3d,不然就只是平面的變換，而不是3D的變換

手把手帶你玩轉css3-3d
以上咱們稍微瞭解概念，下面就開始實戰吧！

第一步：html結構
很簡單的一個容器包裹着一個裝了6個piece的piece-box

[HTML] 純文本查看複製代碼
?
1
<div class="container"> <div class="piece-box"> <div class="piece piece-1"></div> <div class="piece piece-2"></div> <div class="piece piece-3"></div> <div class="piece piece-4"></div> <div class="piece piece-5"></div> <div class="piece piece-6"></div> </div></div>

第二步：加上必要的3D屬性，進入3D世界
經過上面的講解，應該對perspective比較熟悉了吧,

[CSS] 純文本查看複製代碼
?
1
/容器/.container { -webkit-perspective: 1000px; -moz-perspective: 1000px; -ms-perspective: 1000px; perspective: 1000px;}/piece盒子/ .piece-box { perspective-origin: 50% 50%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d;}第三步：加入必要的樣式/容器/.container { -webkit-perspective: 1000px; -moz-perspective: 1000px; -ms-perspective: 1000px; perspective: 1000px;}/piece盒子/.piece-box { position: relative; width: 200px; height: 200px; margin: 300px auto; perspective-origin: 50% 50%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d;}/piece通用樣式/.piece { position: absolute; width: 200px; height: 200px; background: red; opacity: 0.5;}.piece-1 { background: #FF6666;}.piece-2 { background: #FFFF00;}.piece-3 { background: #006699;}.piece-4 { background: #009999;}.piece-5 { background: #FF0033;}.piece-6 { background: #FF6600;}

固然，在你完成這步以後你仍是隻看到一個正方形，也就是咱們的piece-6,由於咱們的3Dtransform還沒開始

第四步：3D變換來襲
首先是實現走馬燈，咱們先不要讓它走，先實現燈部分。

如何實現呢？由於要構成一個圓，圓是360度，而咱們有6個piece，那麼，很容易想到，咱們須要把每個piece以遞增60度的方式rotateY，就變成以下

如何把他們從中心拉開呢？
這裏咱們還要注意一點，在咱們使元素繞Y軸旋轉之後，其實X軸和Z軸也會跟着旋轉，所因此正方體的每一個面的垂直線仍是Z軸，咱們就只須要改變下translateZ的值,而當translateZ爲正的時候，就朝着咱們的方向走來，這樣就能夠拉開了
可是拉開的距離如何衡量？

是否是一目瞭然了~

下面咱們再修改下css

第五步：animation讓3D動起來
要實現走馬燈動，其實很簡單，咱們只要在piece-box上加上旋轉動畫就好了,5s完成動畫，從0度旋轉到360度

[CSS] 純文本查看複製代碼
?
1
/piece盒子/.piece-box { position: relative; width: 200px; height: 200px; margin: 300px auto; perspective-origin: 50% 50%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; animation: pieceRotate 5s; -moz-animation: pieceRotate 5s; / Firefox / -webkit-animation: pieceRotate 5s; / Safari and Chrome / -o-animation: pieceRotate 5s ; / Opera /}/走馬燈動畫/@keyframes pieceRotate{0% {-webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);}100% {-webkit-transform: rotateY(360deg); -ms-transform: rotateY(360deg); -o-transform: rotateY(360deg); transform: rotateY(360deg);}}/ Firefox /@-moz-keyframes pieceRotate{0% {-webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);}100% {-webkit-transform: rotateY(360deg); -ms-transform: rotateY(360deg); -o-transform: rotateY(360deg); transform: rotateY(360deg);}}/ Safari and Chrome /@-webkit-keyframes pieceRotate{0% {-webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);}100% {-webkit-transform: rotateY(360deg); -ms-transform: rotateY(360deg); -o-transform: rotateY(360deg); transform: rotateY(360deg);}}/ Opera /@-o-keyframes pieceRotate{0% {-webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);}100% {-webkit-transform: rotateY(360deg); -ms-transform: rotateY(360deg); -o-transform: rotateY(360deg); transform: rotateY(360deg);}}

這裏就不放gif了~hhh是否是實現了酷炫的效果，還沒結束哦~更酷炫的正方體組裝

正方體，其實也不難實現，我這裏就不很詳細說了，你首先能夠想象一個面，而後去拓展其餘面如何去實現，好比咱們把正方體的前面translateZ(100px）讓它靠近咱們100px,而後後面translateZ(-100px）讓它遠離咱們100px,左邊是先translateX(-100px再rotateY(90deg),右邊就是translateX(100px)再rotateY(90deg),上面是先translateY(-100px)，rotateX(90deg)，下面是先translateY(100px)，rotateX(90deg)，只要咱們寫進動畫，一切就大功告成。
css就爲以下，如下就只放piece1，其餘讀者能夠本身類比實現，或者看我github的源碼

[CSS] 純文本查看複製代碼
?
1
.piece-1 { background: #FF6666; -webkit-transform: rotateY(0deg) translateZ(173.2px); -ms-transform: rotateY(0deg) translateZ(173.2px); -o-transform: rotateY(0deg) translateZ(173.2px); transform: rotateY(0deg) translateZ(173.2px); animation: piece1Rotate 5s 5s; -moz-animation: piece1Rotate 5s 5s; / Firefox / -webkit-animation: piece1Rotate 5s 5s; / Safari and Chrome / -o-animation: piece1Rotate 5s 5s; / Opera / -webkit-animation-fill-mode: forwards; / Chrome, Safari, Opera / animation-fill-mode: forwards; }/front/ @keyframes piece1Rotate { 0% {-webkit-transform: rotateY(0deg) translateZ(173.2px); -ms-transform: rotateY(0deg) translateZ(173.2px); -o-transform: rotateY(0deg) translateZ(173.2px); transform: rotateY(0deg) translateZ(173.2px);} 100% {-webkit-transform: rotateY(0deg) translateZ(100px); -ms-transform: rotateY(0deg) translateZ(100px); -o-transform: rotateY(0deg) translateZ(100px); transform: rotateY(0deg) translateZ(100px);} } / Firefox / @-moz-keyframes piece1Rotate { 0% {-webkit-transform: rotateY(0deg) translateZ(173.2px); -ms-transform: rotateY(0deg) translateZ(173.2px); -o-transform: rotateY(0deg) translateZ(173.2px); transform: rotateY(0deg) translateZ(173.2px);} 100% {-webkit-transform: rotateY(0deg) translateZ(100px); -ms-transform: rotateY(0deg) translateZ(100px); -o-transform: rotateY(0deg) translateZ(100px); transform: rotateY(0deg) translateZ(100px);} } / Safari and Chrome / @-webkit-keyframes piece1Rotate { 0% {-webkit-transform: rotateY(0deg) translateZ(173.2px); -ms-transform: rotateY(0deg) translateZ(173.2px); -o-transform: rotateY(0deg) translateZ(173.2px); transform: rotateY(0deg) translateZ(173.2px);} 100% {-webkit-transform: rotateY(0deg) translateZ(100px); -ms-transform: rotateY(0deg) translateZ(100px); -o-transform: rotateY(0deg) translateZ(100px); transform: rotateY(0deg) translateZ(100px);} } / Opera / @-o-keyframes piece1Rotate { 0% {-webkit-transform: rotateY(0deg) translateZ(173.2px); -ms-transform: rotateY(0deg) translateZ(173.2px); -o-transform: rotateY(0deg) translateZ(173.2px); transform: rotateY(0deg) translateZ(173.2px);} 100% {-webkit-transform: rotateY(0deg) translateZ(100px); -ms-transform: rotateY(0deg) translateZ(100px); -o-transform: rotateY(0deg) translateZ(100px); transform: rotateY(0deg) translateZ(100px);} }

細心的讀者能夠發現我用了一個animation-fill-mode: forwards;,這個其實就是讓這些piece保持動畫最後的效果，也就是正方體的效果，讀者能夠不加試試看，那仍是會恢復原樣。
最後就是正方體的旋轉了，前面咱們的容器已經用過animation了,讀者可能會想我再加個class放animaiton不就好了，hhh，animaiton會覆蓋掉前面的，那前面的走馬燈的動畫就沒了，因此在html結構中，我再加了一個box包裹piece, 以下

[HTML] 純文本查看複製代碼
?
1
<div class="container"> <div class="piece-box"> <div class="piece-box2"> <div class="piece piece-1"></div> <div class="piece piece-2"></div> <div class="piece piece-3"></div> <div class="piece piece-4"></div> <div class="piece piece-5"></div> <div class="piece piece-6"></div> </div> </div></div>

在動畫上咱們能夠控制正方體動畫的延時時間，就是等到正方體組裝完成後再開始動畫

animation: boxRotate 5s 10s infinite;第一個5s是動畫時長，第二個10s是延時時間，而後咱們讓正方體的旋轉，繞X軸從0度到360度,繞Y軸也0到Y軸360度。

[CSS] 純文本查看複製代碼
?
1
.piece-box2 { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; animation: boxRotate 5s 10s infinite; -moz-animation: boxRotate 5s 10s infinite; / Firefox / -webkit-animation: boxRotate 5s 10s infinite; / Safari and Chrome / -o-animation: boxRotate 5s 10s infinite; / Opera /}/正方體旋轉動畫/@keyframes boxRotate{0% {-webkit-transform: rotateX(0deg) rotateY(0deg);); -ms-transform: rotateX(0deg) rotateY(0deg);); -o-transform: rotateX(0deg) rotateY(0deg);); transform: rotateX(0deg) rotateY(0deg););}100% {-webkit-transform: rotateX(360deg) rotateY(360deg); -ms-transform: rotateX(360deg) rotateY(360deg); -o-transform: rotateX(360deg) rotateY(360deg); transform: rotateX(360deg) rotateY(360deg);}}/ Firefox /@-moz-keyframes boxRotate{0% {-webkit-transform: rotateX(0deg) rotateY(0deg);); -ms-transform: rotateX(0deg) rotateY(0deg);); -o-transform: rotateX(0deg) rotateY(0deg);); transform: rotateX(0deg) rotateY(0deg););}100% {-webkit-transform: rotateX(360deg) rotateY(360deg); -ms-transform: rotateX(360deg) rotateY(360deg); -o-transform: rotateX(360deg) rotateY(360deg); transform: rotateX(360deg) rotateY(360deg);}}/ Safari and Chrome /@-webkit-keyframes boxRotate{0% {-webkit-transform: rotateX(0deg) rotateY(0deg);); -ms-transform: rotateX(0deg) rotateY(0deg);); -o-transform: rotateX(0deg) rotateY(0deg);); transform: rotateX(0deg) rotateY(0deg););}100% {-webkit-transform: rotateX(360deg) rotateY(360deg); -ms-transform: rotateX(360deg) rotateY(360deg); -o-transform: rotateX(360deg) rotateY(360deg); transform: rotateX(360deg) rotateY(360deg);}}/ Opera /@-o-keyframes boxRotate{0% {-webkit-transform: rotateX(0deg) rotateY(0deg);); -ms-transform: rotateX(0deg) rotateY(0deg);); -o-transform: rotateX(0deg) rotateY(0deg);); transform: rotateX(0deg) rotateY(0deg););}100% {-webkit-transform: rotateX(360deg) rotateY(360deg); -ms-transform: rotateX(360deg) rotateY(360deg); -o-transform: rotateX(360deg) rotateY(360deg); transform: rotateX(360deg) rotateY(360deg);}}

最後效果，大功告成！