純CSS3動畫之旋轉的立方體

如何繪製正方體或者長方體，正方體和長方體原理是相似的，此處我們以正方體為例。

繪製效果：

html結構：

class="cubic">

class="before">
span>
class="after">
span>
class="top">
span>
class="bottom">
span>
class="left">
span>
class="right">
span>
div>原理： 
因為是正方體：寬度=長度=高度。 
1、 從前後視角看，就是我們正方體的前面（before）和後面（after）,width*height=長*高（此處必須按照這個順序對應）； 
前後視角就和我們平時看到的一張紙，相當於和二維平面平行，然後將前後面在垂直與二維平面的線上拉開正方體的寬度的距離，這樣前後面準備就緒。 
2、接下來是左右視角，即正方體的左右面，width*height=寬*高（此處必須按照這個順序對應）； 
左右視角相當於我們將與二維平面平行的正方形沿著y軸旋轉90度，然後將左右視角在的平面作為二維平面，同樣在與其垂直的線上拉開正方體長度的距離，這樣左右面準備就緒。 
3、最後是上下視角，即正方體的上下面，width*height=長*寬（此處必須按照這個順序對應）； 
上下視角相當於我們將與二維平面平行的正方形沿著x軸旋轉90度，然後將上下視角在的平面作為二維平面，同樣在與其垂直的線上拉開正方體高度的距離，這樣乙個簡單的正方體完成。 
注意：以上是針對正方體的六個面，即div中的六個span標籤。 
然後必須要設定以下屬性：
transform: rotatex(-30deg) rotatey(30deg);

transform: rotatex(-30deg) rotatey(30deg)是設定正方體在空間中的角度，相當於你的眼睛定位在某一點，然後你旋轉各個方向**。

然後加一些動畫效果，正方體就可以轉動起來啦。

下面我們直接上完整的**（加了動畫效果）：

title>

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

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

css3實現旋轉的立方體

利用css3實現旋轉的立方體 這裡主要用到了css3的transform，rotate，translate，animation 首先給ul設定transform rotatex 30deg rotatey 55deg 使物體看起來有立體感 然後給六個li，給li設成絕對定位，使六個li重疊到一起 先...

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

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