用css3製作立方體步驟
具體實現**
千峰逆戰2004學員完成演示效果
因為是製作立方體，所以我們要給自定義大小的盒子新增3d屬性
transform-style: preserve-3d;這樣我們當**執行的時候才會在我們眼前顯示3d的效果，完後是新增景深，也就是目標位置距離我們眼睛間的距離，模仿實際看到的3d效果，perspective: 900px;建立同樣大小的六個平面，分別用旋轉加位移的方式將六個面挪動成正方體的樣子。
新增3d屬性
新增景深
由於我用到了hover屬性，所以新增過度時間為1s
新增旋轉屬性，deg為旋轉單位
新增位移屬性，
新增相對定位
新增絕對定位
hover效果，當滑鼠移入到盒子上時執行旋轉和位移效果，形成立方體
建立乙個大的盒子設定好大一點的寬高，用來裝立方體，也可以不用，直接在body裡製作立方體，並在大的盒子裡新增3d屬性和景深，並新增相對定位屬性。
在大的盒子裡建立6個相同大小的盒子，新增絕對定位屬性。
為六個面分別新增過渡時間
使用hover屬性，分別利用旋轉和位移。屬性將六個面分別移動到相應的位置。
css3製作立方體
建立6個寬高為100px的正方形，調整ul在頁面的位置，分別設定不同li裡的背景色。為了方便區分，在li裡設定數字顯示 使用絕對定位的目的是為了讓6個li分別顯示在圍成正方體所需的位置上。屬性 transform style 設定3d空間 屬性值 flat 處在2d空間 preserve 3d 處在...
CSS3製作立方體
要用css3來製作乙個正方體，我們先來看正方體的結構，如圖 1.建立結構 正方體有六個面，我們可以先建立六個面，放在li裡。設定寬高，和背景色 方便區分 效果如圖 2.位移 接下來可以通過定位 position 和位移 translate 將他們移動到圖一的位置。先用絕對定位將六塊正方形定位到第1塊...
關於如何使用CSS3製作立方體的問題
先說一下網頁當中的數軸，以螢幕的左上方為原點 重點說一下z軸，z軸是垂直於螢幕的，比如我們給乙個元素加transform屬性，transform translatez 100px 從正面看是沒有任何變化的。所以我們不能從正面去看，一般我們想看到立方體效果，都要給box加乙個三維空間上的旋 trans...