如何繪製正方體或者長方體,正方體和長方體原理是相似的,此處我們以正方體為例。
繪製效果:
html結構:
transform-style: preserve-3d;注意: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)
是設定正方體在空間中的角度,相當於你的眼睛定位在某一點,然後你旋轉各個方向**。
然後加一些動畫效果,正方體就可以轉動起來啦。
下面我們直接上完整的**(加了動畫效果):
charset="utf-8">
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 ...