首頁 > 開發者 > JavaScript
一款基於css3的散子3D翻轉特效，css33d翻轉特效
css3使我們能夠跳出2d空間，實現3維空間的動畫效果，這裡給出一個自動翻轉的3d色子動畫效果製作過程。
第一步，首先進行HTML的布局，對於3D效果，布局有一定的規律，代碼如下：
<body><div id="outer"> <div id="group"> <div class="page" id="page1">.</div> <div class="page" id="page2">..</div> <div class="page" id="page3">...</div> <div class="page" id="page4">....</div> <div class="page" id="page5">.....</div> <div class="page" id="page6">......</div> </div></div></body>
在body中定義一個叫做outer的div，它是最外層的div，用來提供一個3D情境，可以認為它是一個3D圖形的展示平台，只有定義了這樣一個div，才能夠展示3D圖形，此外定義一個class為group的div，用來盛放色子的六個平面，將它們組合在一起。最後再定義6個平行的div，表示色子的六個平面。
第二步，定義三維情境的css,代碼如下：
#outer{ /*定義視距*/ -webkit-perspective:500px; -WebKit-perspective-origin: 50% 50%; -moz-perspective:500px; -moz-perspective-origin: 50% 50%; overflow: hidden; }
這裡的perspective表示的是透過這個三維情境看到裡面的立體效果的距離，值越大看到的效果越遠，值越小，看到的效果越近。perspective-origin表示的是相對於瀏覽器哪個角度去觀察三維圖形，第一個參數表示X軸方向，第二個參數表示Y軸方向，可以使用單位值px,也可以使用百分比。為了達到相容ff和chrome的目的，所以給相應的CSS名稱前加上moz和WebKit首碼。這裡有必要說一下css3中的座標定義，如下：
在css3中，X軸正方向向右，Y軸正方向向下，Z軸正方向由螢幕內伸向螢幕外，這和立體幾何中的座標系定義不同。
第三步，為id為group的div設定css屬性，這個div主要是將色子的6個平面組合在一起，便於定義整體動畫效果，代碼如下：
#group{ width: 200px; height: 200px; position: relative; -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; margin: 200px auto; }
這裡定義了該div的寬高，並定義其position為relative，便於其中的六個平面相對於這個div進行絕對位置，同時transform-style:preserve-3d這個屬性告訴瀏覽器，所有transform變換都是在3D空間中的變換，而不是在2D空間中，同樣為了相容加上了首碼。
第四步，定義每個平面div的通用page屬性，即每個色子平面共同的CSS屬性，代碼如下：
.page{ width: 200px; height: 200px; position: absolute; border-radius: 20px; text-align: center; font-weight: bold; opacity: 0.5; overflow: hidden; filter:alpha(opacity=50); font-size:150px; word-break:break-all; word-wrap:break-word; }
這裡定義了每個平面的寬高和其父div group的寬高相同，進行絕對位置，（只有絕對位置了，讓其脫離文檔流，才能夠應用transform3D變換效果，否則只能在2D空間變換），需要說明的是word-break:break-all;word-wrap:break-word;這兩句
第五步，定義每個平面的div的CSS屬性
第一個平面：
#page1{background-color: #10a6ce;line-height: 100px;}
為了區分每個平面，顯示出3D效果，這裡需要將相鄰的div進行不同背景色的設定，第一個div預設位於XY平面，不作變換
第二個平面：
#page2{ background-color: #0073b3; -webkit-transform-origin:right; -webkit-transform:rotateY(-90deg); -moz-transform-origin:right; -moz-transform:rotateY(-90deg); line-height: 100px; }
這裡使用transform-origin來定義該平面以哪個邊開始進行變換，這裡以最右邊的邊沿著Y軸繞行-90度，同樣為了相容加上了首碼
第三個平面：
#page3{ background-color: #07beea; -webkit-transform-origin:left; -webkit-transform:rotateY(90deg); -moz-transform-origin:left; -moz-transform:rotateY(90deg); line-height: 80px; }
第三個平面：
#page4{ background-color: #29B4F0; -webkit-transform-origin:top; -webkit-transform:rotateX(-90deg); -moz-transform-origin:top; -moz-transform:rotateX(-90deg); line-height: 80px; }
第五個平面：
#page5{background-color: #6699cc;-webkit-transform-origin:bottom;-webkit-transform:rotateX(90deg);-moz-transform-origin:bottom;-moz-transform:rotateX(90deg);line-height: 50px;}
第六個平面：
#page6{background-color: #10a6ce;-webkit-transform:translateZ(-200px);-moz-transform:translateZ(-200px);line-height: 50px;}
這個第六個平面需要沿著Z軸進行其寬高長度的平移，已達到串連其他平面的目的
第六步，定義主要畫面格動畫，代碼如下：
@-moz-keyframes scroll { 0% { -moz-transform:rotateY(0deg) rotateX(0deg) ; } 50% { -moz-transform:rotateY(360deg) rotateX(0deg) ; } 100% { -moz-transform:rotateY(360deg) rotateX(360deg); } } @-webkit-keyframes scroll { 0% { -webkit-transform:rotateY(0deg) rotateX(0deg) ; } 50% { -webkit-transform:rotateY(360deg) rotateX(0deg) ; } 100% { -webkit-transform:rotateY(360deg) rotateX(360deg); } }
這裡的動畫分為兩個階段，從0%到50%，該色子沿著Y軸進行360度旋轉，從50%到100%的時間內，沿著X軸再進行360度旋轉，這樣完成一次動畫效果，同樣為了相容，給主要畫面格keyframes前面加上了首碼
第七步，在id為group的div中使用CSS調用前面定義的主要畫面格動畫，這裡由於需要改色子六個平面同時發生變換，所以需要在六個平面的父div上調用動畫
#group{ width: 200px; height: 200px; position: relative; -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; margin: 200px auto; -webkit-animation:scroll 8s linear 0s infinite; -moz-animation:scroll 8s linear 0s infinite; }
在第三步的結果上加上了animation:scroll 8s linear 0s infinite;CSS屬性，表示調用名為scroll的動畫，一次動畫完成時間為8s,動畫變換的速度為勻速，立即開始執行動畫並進行無限動畫效果的迴圈。
線上預覽 源碼下載
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
