css3實現色子自動翻轉效果

css3使我們能夠跳出2d空間，實現3維空間的動畫效果，這裡給出乙個自動翻轉的3d色子動畫效果製作過程。

第一步，首先進行html的布局，對於3d效果，布局有一定的規律，**如下：

.....

....

.....

......

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

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

#outer

這裡的perspective表示的是透過這個三維場景看到裡面的三維效果的距離，值越大看到的效果越遠，值越小，看到的效果越近。perspective-origin表示的是相對於瀏覽器哪個角度去觀察三維圖形，第乙個引數表示x軸方向，第二個引數表示y軸方向，可以使用單位值px,也可以使用百分比。為了達到相容ff和chrome的目的，所以給相應的css名稱前加上moz和webkit字首。這裡有必要說一下css3中的座標定義，如下：

在css3中，x軸正方向向右，y軸正方向向下，z軸正方向由螢幕內伸向螢幕外，這和立體幾何中的座標系定義不同。

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

#group

這裡定義了該div的寬高，並定義其position為relative，便於其中的六個平面相對於這個div進行絕對定位，同時transform-style:preserve-3d這個屬性告訴瀏覽器，所有transform變換都是在3d空間中的變換，而不是在2d空間中，同樣為了相容加上了字首。

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

.page

這裡定義了每個平面的寬高和其父div group的寬高相同，進行絕對定位，（只有絕對定位了，讓其脫離文件流，才能夠應用transform3d變換效果，否則只能在2d空間變換），需要說明的是word-break:break-all;word-wrap:break-word;這兩句

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

第乙個平面：

#page1

為了區分每個平面，顯示出3d效果，這裡需要將相鄰的div進行不同背景色的設定，第乙個div預設位於xy平面，不作變換

第二個平面：

#page2

這裡使用transform-origin來定義該平面以哪個邊開始進行變換，這裡以最右邊的邊沿著y軸繞行-90度，同樣為了相容加上了字首

第三個平面：

#page3

第三個平面：

#page4

第五個平面：

#page5

第六個平面：

#page6

這個第六個平面需要沿著z軸進行其寬高長度的平移，已達到連線其他平面的目的

第六步，定義關鍵幀動畫，**如下：

@-moz-keyframes scroll 
50% 
100% 
}@-webkit-keyframes scroll 
50% 
100% 
}

這裡的動畫分為兩個階段，從0%到50%，該色子沿著y軸進行360度旋轉，從50%到100%的時間內，沿著x軸再進行360度旋轉，這樣完成一次動畫效果，同樣為了相容，給關鍵幀keyframes前面加上了字首

第七步，在id為group的div中使用css呼叫前面定義的關鍵幀動畫，這裡由於需要改色子六個平面同時發生變換，所以需要在六個平面的父div上呼叫動畫

#group

在第三步的結果上加上了animation:scroll 8s linear 0s infinite;css屬性，表示呼叫名為scroll的動畫，一次動畫完成時間為8s,動畫變換的速度為勻速，立即開始執行動畫並進行無限動畫效果的迴圈。

最終demo

css3實現色子自動翻轉效果

CSS3實現翻轉 Flip 效果

CSS3實現翻轉 Flip 效果

CSS3實現翻轉卡牌效果

css3實現色子自動翻轉效果

CSS3實現翻轉 Flip 效果

CSS3實現翻轉 Flip 效果

CSS3實現翻轉卡牌效果

相關推薦