想來大家在初學(xué)前端之處，也很好奇巾遭，那些炫酷的特效真的可以由自己編寫出來嘛肉康，其實(shí)是的，現(xiàn)在我來分享一個旋轉(zhuǎn)的正方體灼舍。還請大家多多支持吼和。
做一個正方體首先要做出六個面，這就可以定下來基本的形狀片仿。讓這個正方體旋轉(zhuǎn)起來纹安，其實(shí)就是讓各個面保持一個相同的運(yùn)動軌跡，讓他們在x/y/z軸進(jìn)行一定程度的旋轉(zhuǎn)起來。物體的運(yùn)動就是一個動畫的定義厢岂，可以自己定運(yùn)動周期的時間光督。
1.首先，定義六個面塔粒，需要注意的结借，保持box1-6關(guān)于y及z旋轉(zhuǎn)的角度要相等，否則會出現(xiàn)旋轉(zhuǎn)后離體的現(xiàn)象卒茬。顏色最好使用半透明船老，這樣旋轉(zhuǎn)起來效果更好。
2.現(xiàn)在需要寫出一個div圃酵，給旋轉(zhuǎn)的立方體一個布局空間柳畔。
現(xiàn)在里面已經(jīng)定義了3d旋轉(zhuǎn)，以及設(shè)置了從何處查看一個元素的角度郭赐，還規(guī)定了旋轉(zhuǎn)的周期薪韩。當(dāng)在@keyframes創(chuàng)建動畫，把它綁定到一個選擇器捌锭，否則動畫不會有任何效果俘陷。
把 "mydhua" 動畫捆綁到 div 元素，時長：5 秒：
3.div布局設(shè)置完成观谦，六個面也已經(jīng)寫好拉盾，下一步就是利用css動畫，制作一個動態(tài)
動畫是使元素從一種樣式逐漸變化為另一種樣式的效果豁状。
用百分比來規(guī)定變化發(fā)生的時間捉偏，或用關(guān)鍵詞 "from" 和 "to"，等同于 0% 和 100%替蔬。
0% 是動畫的開始告私，100% 是動畫的完成屎暇。
為了得到最佳的瀏覽器支持承桥，可以定義 0% 和 100% 選擇器。
這個時候根悼，在body里面就可以直接使用了
此時凶异，你就可以看到一個旋轉(zhuǎn)的立方體了。感興趣的話挤巡，可以試一試呀剩彬！
