利用css3實現旋轉的立方體
這裡主要用到了css3的transform，rotate，translate，animation
首先給ul設定transform ：rotatex（-30deg） rotatey(-55deg)使物體看起來有立體感
然後給六個li，給li設成絕對定位，使六個li重疊到一起
先做上面，選擇乙個li使繞x軸旋轉90deg，然後再沿z軸平移100px
再來後面，選擇乙個li使繞x軸旋轉180deg，然後再沿z軸平移100px
再來下面，選擇乙個li使繞x軸旋轉270deg，然後再沿z軸平移100px
接下來是前面，選擇乙個li使繞x軸旋轉360deg（其實就是乙個面不用動就行了），然後再沿z軸平移100px
然後是左面，選擇乙個li使繞y軸旋轉90deg，然後再沿z軸平移100px
然後是右面，選擇乙個li使繞y軸旋轉90deg，然後再沿z軸平移-100px
現在的效果是這樣的
接下來是讓他動起來了，給ul加上transform-style: preserve-3d;在定義乙個動畫使其圍繞y軸旋轉
最終的效果是這樣的
詳細**
css3製作立方體
建立6個寬高為100px的正方形，調整ul在頁面的位置，分別設定不同li裡的背景色。為了方便區分，在li裡設定數字顯示 使用絕對定位的目的是為了讓6個li分別顯示在圍成正方體所需的位置上。屬性 transform style 設定3d空間 屬性值 flat 處在2d空間 preserve 3d 處在...
CSS3製作立方體
要用css3來製作乙個正方體，我們先來看正方體的結構，如圖 1.建立結構 正方體有六個面，我們可以先建立六個面，放在li裡。設定寬高，和背景色 方便區分 效果如圖 2.位移 接下來可以通過定位 position 和位移 translate 將他們移動到圖一的位置。先用絕對定位將六塊正方形定位到第1塊...
純CSS3動畫之旋轉的立方體
如何繪製正方體或者長方體，正方體和長方體原理是相似的，此處我們以正方體為例。繪製效果 html結構 class cubic class before span class after span class top span class bottom span class left span clas...