CSS幾何體是CSS3中新增加的一種可用于創建三維圖形的技術。它可以讓我們在網頁中輕松創建立方體、球體、錐體等形態。使用CSS幾何體,我們可以用更少的代碼和更簡單的方式實現3D效果,不再需要借助于圖片或者Flash。
/* 以立方體為例 */ .cube { width: 200px; height: 200px; perspective: 800px; transform-style: preserve-3d; } .cube .side { position: absolute; width: 200px; height: 200px; background: #ccc; } .cube .side.front { transform: translateZ(100px); } .cube .side.back { transform: translateZ(-100px) rotateY(180deg); } .cube .side.top { transform: rotateX(90deg) translateZ(-100px); } .cube .side.bottom { transform: rotateX(-90deg) translateZ(-100px); } .cube .side.left { transform: rotateY(-90deg) translateZ(100px); } .cube .side.right { transform: rotateY(90deg) translateZ(100px); }
以上代碼即可完成一個立方體的呈現,其中perspective屬性是表示透視距離,值越大,觀察到的立方體就越小。
通過CSS幾何體,我們在網頁中可以創建出豐富多彩的三維圖形,這極大地豐富了我們網頁的形式和內容。