方法二：
步驟一：
乙個大盒子包著6個小盒子；
步驟二：
大盒子的寬高和小盒子的一樣；
步驟三：
子絕父相，讓6個小盒子脫離文件流，疊在一起；
步驟四：
給6個小盒子設定不同背景顏色；
步驟五：
先做上下兩個面，分別沿y軸的上下各自平移寬度的一半，再繼續圍繞x軸各自旋轉90deg。
步驟六：
先做左右兩個面，分別沿x軸的左右各自平移寬度的一半，再繼續圍繞y軸各自旋轉90deg。
步驟七：
先做前後兩個面，分別沿z軸的前後各自平移寬度的一半。
步驟八：
給父元素加transform-style: preserve-3d;轉成3d.
步驟九：
讓父元素旋轉，檢視效果， transform:rotatey(30deg) rotatex(30deg);
html和css樣式：12
3456
旋轉立方體動畫demo
園子裡看到很不錯的3d展示，需要在 chrome 或 edge 下正常工作 效果圖 源 html head head body div class newsitem div id blog news div style display none id document write ajax div ...
css3製作立方體
建立6個寬高為100px的正方形，調整ul在頁面的位置，分別設定不同li裡的背景色。為了方便區分，在li裡設定數字顯示 使用絕對定位的目的是為了讓6個li分別顯示在圍成正方體所需的位置上。屬性 transform style 設定3d空間 屬性值 flat 處在2d空間 preserve 3d 處在...
CSS3製作立方體
要用css3來製作乙個正方體，我們先來看正方體的結構，如圖 1.建立結構 正方體有六個面，我們可以先建立六個面，放在li裡。設定寬高，和背景色 方便區分 效果如圖 2.位移 接下來可以通過定位 position 和位移 translate 將他們移動到圖一的位置。先用絕對定位將六塊正方形定位到第1塊...