要用css3來製作乙個正方體，我們先來看正方體的結構，如圖：
1.建立結構
正方體有六個面，我們可以先建立六個面，放在li裡。設定寬高，和背景色（方便區分），效果如圖：
2.位移
接下來可以通過定位(position)和位移(translate)將他們移動到圖一的位置。
先用絕對定位將六塊正方形定位到第1塊的位置，然後再用位移移動到相對的位置，第6塊和第1塊的水平垂直的位置相同，可以用translatez沿著z軸移動即可。效果如圖：transform:translatex(-100px)
transform:translatex(100px)
transform:translatey(-100px)
transform:translatey(100px)
transform:translatez(-100px)
3.設定3d效果
此時，第6塊位置是看不出來的，需要設定3d效果才能做到真正的立體圖形。
transform-style: preserve-3d;4.旋轉第2塊需要以右側為旋轉中心繞著y軸旋轉-90°就可以達到效果；
第3塊需要以左側為旋轉中心繞著y軸旋轉90°就可以達到效果；
第4塊需要以底側為旋轉中心繞著x軸旋轉90°就可以達到效果；
第5塊需要以上側為旋轉中心繞著x軸旋轉-90°就可以達到效果。
正方體在這裡就完成了。
css3製作立方體
建立6個寬高為100px的正方形，調整ul在頁面的位置，分別設定不同li裡的背景色。為了方便區分，在li裡設定數字顯示 使用絕對定位的目的是為了讓6個li分別顯示在圍成正方體所需的位置上。屬性 transform style 設定3d空間 屬性值 flat 處在2d空間 preserve 3d 處在...
如何用css3製作立方體
用css3製作立方體步驟 具體實現 千峰逆戰2004學員完成演示效果 因為是製作立方體，所以我們要給自定義大小的盒子新增3d屬性 transform style preserve 3d 這樣我們當 執行的時候才會在我們眼前顯示3d的效果，完後是新增景深，也就是目標位置距離我們眼睛間的距離，模仿實際看...
關於如何使用CSS3製作立方體的問題
先說一下網頁當中的數軸，以螢幕的左上方為原點 重點說一下z軸，z軸是垂直於螢幕的，比如我們給乙個元素加transform屬性，transform translatez 100px 從正面看是沒有任何變化的。所以我們不能從正面去看，一般我們想看到立方體效果，都要給box加乙個三維空間上的旋 trans...