加了一周多的班，這幾天終于稍微有點(diǎn)空的時間了。這個3d動態(tài)效果是我挺早之前做的，不過在今天以前一直都沒什么時間發(fā)上來。
進(jìn)入正題，先來看看這個效果的演示。
下面這是我個人網(wǎng)站上的效果demo
3d骰子demo
現(xiàn)在我一步步在介紹這個效果的實(shí)現(xiàn)原理。
首先，跟之前的旋轉(zhuǎn)木馬效果的步驟一樣，先搭建一個“舞臺”，設(shè)置好舞臺視距。再建好一個容器來放這個骰子。
.block{ padding: 100px 0; perspective: 800px; perspective-orign: 50% 50%; } .dice{ width: 300px; height: 300px; margin: 20px auto; position: relative; transform-style: preserve-3d; }
<div class="block"> <div class="dice"> </div> </div>
block就是舞臺，dice就是容器。給舞臺設(shè)置好舞臺視距perspective，以及觀察位置perspective-orign。在容器里面設(shè)置好transform-style: preserve-3d來設(shè)置這個動態(tài)的效果是3d的。
然后在dice容器里面加入6個div頁面，也就是骰子的6個面。
<div class="block"> <div class="dice"> <div class="page" id="page1">1</div> <div class="page" id="page2">2</div> <div class="page" id="page3">3</div> <div class="page" id="page4">4</div> <div class="page" id="page5">5</div> <div class="page" id="page6">6</div> </div> </div>
設(shè)置公共的樣式。
.page{ width: 200px; height: 200px; position: absolute; font-size: 200px; color: #fff; line-height: 200px; text-align: center; border: 1px solid gray; background:rgb(88,88,88); }
看看現(xiàn)在頁面的樣子。
因?yàn)槲恢枚际且粯拥?，所以這6個頁面都疊在了一起。
然后我們給這個6個頁面都單獨(dú)的設(shè)置一下他們擺放的位置。
#page2{ transform: rotateY(-90deg); transform-origin: right; } #page3{ transform: translateZ(-200px); transform-origin: right; } #page4{ transform: rotateY(90deg); transform-origin: left; } #page5{ transform: rotateX(-90deg); transform-origin: top; } #page6{ transform: rotateX(90deg); transform-origin: bottom; }
這里介紹一下這幾個設(shè)置，rotateX和rotateY的效果就是沿X軸或者Y軸進(jìn)行旋轉(zhuǎn)。但在旋轉(zhuǎn)的時候必須設(shè)置一下transform-origin。這個參數(shù)是設(shè)置旋轉(zhuǎn)的位置，默認(rèn)是沿著X軸或者Y軸的中心來進(jìn)行旋轉(zhuǎn)。我們根據(jù)每個頁面需要旋轉(zhuǎn)的方向來設(shè)置旋轉(zhuǎn)線的位置。translateZ在之前我們就用過了，這個參數(shù)的功能是沿著舞臺視距來進(jìn)行移動。
設(shè)置好各自的樣式之后，再看看頁面的效果。
呃，怎么還是只能看到一個頁面。我們需要看到另外的幾個頁面，這怎么辦。我們只要把每個頁面的背景色設(shè)置成有點(diǎn)透明就行了。
把.page樣式下的background改成如下所示，加一個50%的透明。
background:rgba(88,88,88,0.5);
現(xiàn)在我們再來看看頁面上的效果
現(xiàn)在可以看到后面的頁面了，這些頁面都已經(jīng)正確的到了各自的位置上了。
到現(xiàn)在，靜態(tài)的骰子已經(jīng)做好了，但是我們需要讓它動起來。跟之前的方法一樣，我們只需要給這個容器加上動畫效果，這個骰子就會動起來了。
跟之前一樣，我們需要用到關(guān)鍵幀動畫效果,并把這個動畫效果加到容器上。
@keyframes random-rotate{ 0%{ transform:rotateX(0deg) rotateY(0deg); } 100%{ transform:rotateX(360deg) rotateY(360deg); } }
.dice{ width: 300px; height: 300px; margin: 20px auto; position: relative; transform-style: preserve-3d; animation: random-rotate 5s linear 0s infinite; }
這個關(guān)鍵幀的效果就是X軸和Y軸都一起從0度變到360度。而在綁定關(guān)鍵幀的時候，我們設(shè)置了這個動畫的變化時間為5s，線性平滑變化，并讓他無限循環(huán)。
這樣就都OK，大功告成了。不過不知道你有沒有發(fā)現(xiàn)，這個東西有個小bug，骰子的幾個頁面在旋轉(zhuǎn)之后，數(shù)字顯示已經(jīng)反了。如果小伙伴們?nèi)绻眠@個例子，就得自己想辦法搞定了。
