css3使我們能夠跳出2d空間，實(shí)現(xiàn)3維空間的動畫效果，這里給出一個自動翻轉(zhuǎn)的3d色子動畫效果制作過程。

第一步，首先進(jìn)行HTML的布局，對于3D效果，布局有一定的規(guī)律，代碼如下：

在body中定義一個叫做outer的div，它是最外層的div，用來提供一個3D場景，可以認(rèn)為它是一個3D圖形的展示平臺，只有定義了這樣一個div，才能夠展示3D圖形，此外定義一個class為group的div，用來盛放色子的六個平面，將它們組合在一起。最后再定義6個平行的div，表示色子的六個平面。

第二步，定義三維場景的css,代碼如下：

這里的perspective表示的是透過這個三維場景看到里面的三維效果的距離，值越大看到的效果越遠(yuǎn)，值越小，看到的效果越近。perspective-origin表示的是相對于瀏覽器哪個角度去觀察三維圖形，第一個參數(shù)表示X軸方向，第二個參數(shù)表示Y軸方向，可以使用單位值px,也可以使用百分比。為了達(dá)到兼容ff和chrome的目的，所以給相應(yīng)的CSS名稱前加上moz和WebKit前綴。這里有必要說一下css3中的坐標(biāo)定義，如下：

在css3中，X軸正方向向右，Y軸正方向向下，Z軸正方向由屏幕內(nèi)伸向屏幕外，這和立體幾何中的坐標(biāo)系定義不同。

第三步，為id為group的div設(shè)置css屬性，這個div主要是將色子的6個平面組合在一起，便于定義整體動畫效果，代碼如下：

這里定義了該div的寬高，并定義其position為relative，便于其中的六個平面相對于這個div進(jìn)行絕對定位，同時(shí)transform-style:preserve-3d這個屬性告訴瀏覽器，所有transform變換都是在3D空間中的變換，而不是在2D空間中，同樣為了兼容加上了前綴。

第四步，定義每個平面div的通用page屬性，即每個色子平面共同的CSS屬性，代碼如下：

這里定義了每個平面的寬高和其父div group的寬高相同，進(jìn)行絕對定位，（只有絕對定位了，讓其脫離文檔流，才能夠應(yīng)用transform3D變換效果，否則只能在2D空間變換），需要說明的是word-break:break-all;word-wrap:break-word;這兩句

第五步，定義每個平面的div的CSS屬性

第一個平面：

為了區(qū)分每個平面，顯示出3D效果，這里需要將相鄰的div進(jìn)行不同背景色的設(shè)置，第一個div默認(rèn)位于XY平面，不作變換

第二個平面：

這里使用transform-origin來定義該平面以哪個邊開始進(jìn)行變換，這里以最右邊的邊沿著Y軸繞行-90度，同樣為了兼容加上了前綴

第三個平面：

第三個平面：

第五個平面：

第六個平面：

這個第六個平面需要沿著Z軸進(jìn)行其寬高長度的平移，已達(dá)到連接其他平面的目的

第六步，定義關(guān)鍵幀動畫，代碼如下：

這里的動畫分為兩個階段，從0%到50%，該色子沿著Y軸進(jìn)行360度旋轉(zhuǎn)，從50%到100%的時(shí)間內(nèi)，沿著X軸再進(jìn)行360度旋轉(zhuǎn)，這樣完成一次動畫效果，同樣為了兼容，給關(guān)鍵幀keyframes前面加上了前綴

第七步，在id為group的div中使用CSS調(diào)用前面定義的關(guān)鍵幀動畫，這里由于需要改色子六個平面同時(shí)發(fā)生變換，所以需要在六個平面的父div上調(diào)用動畫

在第三步的結(jié)果上加上了animation:scroll 8s linear 0s infinite;CSS屬性，表示調(diào)用名為scroll的動畫，一次動畫完成時(shí)間為8s,動畫變換的速度為勻速，立即開始執(zhí)行動畫并進(jìn)行無限動畫效果的循環(huán)。

以上就是本文實(shí)現(xiàn)色子3d旋轉(zhuǎn)的全部代碼了，是不是很炫酷的3D旋轉(zhuǎn)特效呢。。。

最新評論