CSS能夠制作3D立體圖,而且制作3D效果非常簡單和容易。我們可以利用CSS3中的變換屬性,如translate、rotate、skew、scale,以及透視(perspective)屬性來制作3D立體圖。
/* 3D立體圖的基本屬性 */ .box { width: 200px; height: 200px; position: relative; perspective: 500px; /* 添加透視屬性 */ } .front { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: red; transform-origin: center center; /* 變換中心 */ transform: translateZ(100px); /* Z軸平移 */ } .back { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: blue; transform-origin: center center; transform: rotateY(180deg) translateZ(100px); /* Y軸旋轉180度+Z軸平移 */ }
以上代碼會創建一個正方體,紅色面為正面,藍色面為背面。我們可以在不同的方向上運用不同的變換屬性來創建更加復雜的3D效果。比如,我們可以在X軸上添加翻轉屬性(rotateX)來創建翻滾的效果。
總之,CSS能夠制作3D立體圖,甚至可以通過利用定位和變換屬性來完成復雜的3D動畫效果。因此,學習CSS3的變換屬性是非常值得的。