在網(wǎng)頁(yè)設(shè)計(jì)中，使用CSS可以制作出各種炫酷的效果，比如今天我們就來(lái)學(xué)習(xí)如何使用CSS將圖片制作成立體旋轉(zhuǎn)效果。

/* 先定義一個(gè)容器 */ 
.container {
perspective: 800px; /* 透視距離 */
}
/* 定義圖片樣式 */ 
.img {
transform-style: preserve-3d; /* 3D變形的基礎(chǔ) */
transition: all 0.5s ease-in-out; /* 過(guò)渡效果 */
}
/* 鼠標(biāo)移入圖片時(shí)的樣式 */ 
.img:hover {
transform: rotateY(-30deg); /* 旋轉(zhuǎn)角度，這里設(shè)置為-30度 */
}

以上代碼中，我們首先定義了一個(gè)容器，使用了透視距離屬性來(lái)構(gòu)建3D空間，接著定義了圖片的樣式，使用了3D變形屬性和過(guò)渡效果來(lái)打造立體的效果，最后設(shè)置了鼠標(biāo)移入時(shí)的樣式，讓圖片繞Y軸旋轉(zhuǎn)-30度。

如果想要制作更加復(fù)雜的立體效果，可以進(jìn)一步使用CSS3的圖形變換屬性，比如rotateX、rotateZ等屬性來(lái)實(shí)現(xiàn)。同時(shí)，我們也可以通過(guò)JavaScript來(lái)控制旋轉(zhuǎn)的角度和速度，實(shí)現(xiàn)更多種類的效果。