網(wǎng)站制作NEWS
旋轉(zhuǎn)正方體
想來(lái)大家在初學(xué)前端之處，也很好奇，那些炫酷的特效真的可以由自己編寫出來(lái)嘛，其實(shí)是的，現(xiàn)在我來(lái)分享一個(gè)旋轉(zhuǎn)的正方體。還請(qǐng)大家多多支持。
做一個(gè)正方體首先要做出六個(gè)面，這就可以定下來(lái)基本的形狀。讓這個(gè)正方體旋轉(zhuǎn)起來(lái)，其實(shí)就是讓各個(gè)面保持一個(gè)相同的運(yùn)動(dòng)軌跡，讓他們?cè)趚/y/z軸進(jìn)行一定程度的旋轉(zhuǎn)起來(lái)。物體的運(yùn)動(dòng)就是一個(gè)動(dòng)畫的定義，可以自己定運(yùn)動(dòng)周期的時(shí)間。
1.首先，定義六個(gè)面，需要注意的，保持box1-6關(guān)于y及z旋轉(zhuǎn)的角度要相等，否則會(huì)出現(xiàn)旋轉(zhuǎn)后離體的現(xiàn)象。顏色最好使用半透明，這樣旋轉(zhuǎn)起來(lái)效果更好。
2.現(xiàn)在需要寫出一個(gè)div，給旋轉(zhuǎn)的立方體一個(gè)布局空間。
現(xiàn)在里面已經(jīng)定義了3d旋轉(zhuǎn)，以及設(shè)置了從何處查看一個(gè)元素的角度，還規(guī)定了旋轉(zhuǎn)的周期。當(dāng)在 @keyframes 創(chuàng)建動(dòng)畫，把它綁定到一個(gè)選擇器，否則動(dòng)畫不會(huì)有任何效果。
把 "mydhua" 動(dòng)畫捆綁到 div 元素，時(shí)長(zhǎng)：5 秒：
3.div布局設(shè)置完成，六個(gè)面也已經(jīng)寫好，下一步就是利用css動(dòng)畫，制作一個(gè)動(dòng)態(tài)
動(dòng)畫是使元素從一種樣式逐漸變化為另一種樣式的效果。
用百分比來(lái)規(guī)定變化發(fā)生的時(shí)間，或用關(guān)鍵詞 "from" 和 "to"，等同于 0% 和 100%。
0% 是動(dòng)畫的開始，100% 是動(dòng)畫的完成。
為了得到最佳的瀏覽器支持，可以定義 0% 和 100% 選擇器。
這個(gè)時(shí)候，在body里面就可以直接使用了
此時(shí)，你就可以看到一個(gè)旋轉(zhuǎn)的立方體了。感興趣的話，可以試一試呀！
多重隨機(jī)標(biāo)簽