CSS3D 立方體是一種使用 CSS3 技術實現的立方體效果。它不需要使用任何 JavaScript 庫,只需利用 CSS3 的轉換(Transform)和動畫(Animation)屬性即可完成。
/* HTML結構 */ <div class="cube"> <div class="face front">Front</div> <div class="face back">Back</div> <div class="face left">Left</div> <div class="face right">Right</div> <div class="face top">Top</div> <div class="face bottom">Bottom</div> </div> /* CSS樣式 */ .cube { position: relative; width: 200px; height: 200px; transform-style: preserve-3d; } .cube .face { position: absolute; width: 200px; height: 200px; background: #ccc; opacity: 0.8; font-size: 30px; text-align: center; line-height: 200px; color: #fff; } .cube .front { transform: translateZ(100px); } .cube .back { transform: translateZ(-100px) rotateY(180deg); } .cube .left { transform: rotateY(-90deg) translateX(-100px); } .cube .right { transform: rotateY(90deg) translateX(100px); } .cube .top { transform: rotateX(90deg) translateY(-100px); } .cube .bottom { transform: rotateX(-90deg) translateY(100px); } /* 動畫 */ @keyframes rotate { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } .cube { animation: rotate 5s infinite linear; }
上述代碼實現了 CSS3D 立方體的基本效果。將 HTML 中的元素按照一個正方形相鄰排列,并使用 transform 屬性將它們移動到立方體的各個面,最后使用動畫 effect 實現旋轉效果。通過更改各面的背景顏色、文本內容及樣式等屬性,可以實現不同的效果。
需要注意的是,在使用 CSS3D 立方體時,應當充分利用瀏覽器的 GPU 加速能力,減少頁面的重繪次數,避免出現卡頓或頁面卡死的情況。
上一篇css3box技巧