效果：
/* 立方體六面樣式 */
.box>div
/* 立方體上面位置和展開動畫 */
.top
/* 立方體下面位置和展開動畫 */
.bottom
/* 立方體左側位置和展開動畫 */
.left
/* 立方體右側位置和展開動畫 */
.right
/* 立方體前面位置和展開動畫 */
.front
/* 立方體後面位置和展開動畫 */
.behind
@keyframes rotate
to } @keyframes topopen
} @keyframes bottomopen
} @keyframes leftopen
} @keyframes rightopen
} @keyframes frontopen
} @keyframes behindopen
}
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 乙個父div包含四個絕對定位的div css code複製內容到剪貼簿 首先，乙個靜態的立方體 css code複製內容到剪貼簿 讓立方體轉起來 css code複製內容到剪貼簿 這裡定義了乙個動畫 rot 從起始位置轉動到 y軸 330deg x軸370deg 並且迴圈無限次，每次4...