除了在css中可以畫3D立方體以外,我們還可以使用css在網(wǎng)頁(yè)上畫出其他形狀的3D圖形。以下是幾種使用css畫出的3D圖形:
/* 畫出3D球體 */
.ball {
width: 80px;
height: 80px;
border-radius: 50%;
background: #0f4;
box-shadow: inset -15px -15px 30px rgba(255,255,255,0.3),
inset 15px 15px 30px rgba(0,0,0,0.3),
15px 15px 30px rgba(0,0,0,0.2);
}
/* 畫出3D金字塔 */
.pyramid {
width: 0;
border-bottom: 140px solid #c00;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
transform: perspective(500px) rotateX(-45deg);
}
/* 畫出3D圓錐 */
.cone {
width: 0;
height: 120px;
border-radius: 70px;
border: 70px solid #c00;
transform: perspective(500px) rotateX(-35deg);
}
/* 畫出3D梯形 */
.trapezoid {
width: 120px;
height: 0;
border-bottom: 100px solid #c00;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
transform: perspective(500px) rotateX(-60deg);
}
我們可以使用不同的樣式屬性與變形函數(shù)來改變這些圖形。在設(shè)置3D圖形樣式時(shí),需要使用`perspective`屬性來指定視角距離,這樣我們才能看到3D圖形的立體效果。
.container {
perspective: 500px;
}
除了以上幾種3D圖形,還有許多其他形狀的3D圖形可以使用css來實(shí)現(xiàn)。通過靈活使用各種屬性和變形函數(shù),我們可以打造出各種炫酷的3D效果,給網(wǎng)頁(yè)增添更多的視覺體驗(yàn)。