先說一下網頁當中的數軸，以螢幕的左上方為原點：
重點說一下z軸，z軸是垂直於螢幕的，比如我們給乙個元素加transform屬性，transform:translatez（100px）;從正面看是沒有任何變化的。所以我們不能從正面去看，一般我們想看到立方體效果，都要給box加乙個三維空間上的旋**transform: rotate3d(1,1,1,-60deg);，這樣觀察才容易看出三維的效果。
對於立方體的六個面，每個面都是通過元素移動+旋轉得到的，如果不懂元素的3d移動和旋轉可以先去看一下我之前寫的部落格裡面有介紹3d移動和旋轉。
下面附上立方體案例**：
lang
="en"
>
>
charset
="utf-8"
>
>
titletitle
>
css3製作立方體
建立6個寬高為100px的正方形，調整ul在頁面的位置，分別設定不同li裡的背景色。為了方便區分，在li裡設定數字顯示 使用絕對定位的目的是為了讓6個li分別顯示在圍成正方體所需的位置上。屬性 transform style 設定3d空間 屬性值 flat 處在2d空間 preserve 3d 處在...
CSS3製作立方體
要用css3來製作乙個正方體，我們先來看正方體的結構，如圖 1.建立結構 正方體有六個面，我們可以先建立六個面，放在li裡。設定寬高，和背景色 方便區分 效果如圖 2.位移 接下來可以通過定位 position 和位移 translate 將他們移動到圖一的位置。先用絕對定位將六塊正方形定位到第1塊...
如何用css3製作立方體
用css3製作立方體步驟 具體實現 千峰逆戰2004學員完成演示效果 因為是製作立方體，所以我們要給自定義大小的盒子新增3d屬性 transform style preserve 3d 這樣我們當 執行的時候才會在我們眼前顯示3d的效果，完後是新增景深，也就是目標位置距離我們眼睛間的距離，模仿實際看...