純CSS3超酷3D旋轉立方體動畫特效

2022-02-19 10:50:14 字數 2099 閱讀 7729

簡要教程

這是一款神奇的純 css3 立方體動畫特效外掛程式。使用css3來製作動畫效果已經成為web前端開發的一種時尚，從簡單的顏色和尺寸動畫，到複雜的旋轉、翻轉動畫， css3 展現了它無窮的魅力。使用css來製作立方體動畫，**簡潔易懂，效果更是令人驚嘆！下面來看看製作方法。

<


div 


class


="wrap"


>


<


div 


class


="cube"


>


<


div 


class


="front"


>front


div>


<


div 


class


="back"


>back


div>


<


div 


class


="top"


>top


div>


<


div 


class


="bottom"


>bottom


div>


<


div 


class


="left"


>left


div>


<


div 


class


="right"


>right


div>


div>


div>
立方體的每乙個面都有它自己的元素。我們稍後會使用css來將立方體的6個面放置到正確的位置上。

.wrap
css perspective屬性是乙個比較複雜的css3屬性。最好的理解它的方法是看完文件後，自己動手修改一下demo中的perspective屬性來看看它的變化。下面需要給包含立方體6個面的立方體的容器.cube提供樣式：

.cube
給立方體容器200畫素的寬度，並設定為相對定位，這樣在它裡面的立方體的6個面可以設定為絕對定位。preserve-3d屬性確保所有6個面都處於3d立體狀態。在為6個面設定它們的位置之前，先給它們一些通用的樣式：

.cube div
在進過上面對立方體6個面的一系列設定之後，現在我們可以為6個面製作變形效果，以使它們組裝為乙個立方體。

.back .right .left .top .bottom .front
rotatey的值可以旋轉立方體的各個面，使上面的文字處於正確的位置上。而translatez的值使元素在指定容器中向前或向後移動。translatey的值看起來有些混亂，但是請記住，它的作用是通過透明的面板來使指定的面公升高或降低來製作3d效果。每乙個面都有自己的translations值來使它們處於適當的位置上。你可以自己修改一下這些值來看看效果。

@keyframes spin to }


.cube
是不是比想象中的要簡單得多？6個面上的文字在立方體旋轉時都處於正確的位置上。使用關鍵幀可以製作出許多神奇的動畫效果。

該效果是demo1中的第二種效果。要在垂直方向上旋轉立方體只需要簡單的改變動畫的旋轉軸為y軸。但是這種情況下面板上的文字有時候會顯示在相反的方向上，所以我們需要修改一下元素旋轉的**：

@keyframes spin-vertical to }


.cube-wrap.vertical .cube .cube-wrap.vertical .top .cube-wrap.vertical .back .cube-wrap.vertical .bottom 



.wrap
現在立方體每次只會顯示乙個面。

效果圖（具體了解請看原文）：

純css3實現旋轉3D立方體骰子

純css3實現旋轉3d立方體骰子 自旋轉型 主要運用css3的 transform，rotate，translate，animation等動畫 以 perspectiveperspective origintransform style 等屬性為輔助 具體實現 如下 container front ...

3D 旋轉立方體

source cube src.js var cube function this.5 function d,e,a if e if a this.1 this.1 function p j,g,b,o this.7 function this.3 function this.4 function ...

3D立方體旋轉

1 首先要知道3d,x軸，y軸，z軸的方向 如圖所示 2 要想做乙個立方體首先是做6個面 以中間為基準 中間向前面平移150px transform translatez 150px 後面也平移150px,然後旋轉 rotatey 180deg 這樣前後面就做完了。左 以中間為準逆時針針旋轉90度 ...