CSS 圖片旋轉(zhuǎn)是令人驚嘆的設(shè)計(jì)技巧，為您的網(wǎng)頁(yè)增添了一份令人賞心悅目的風(fēng)格。然而，讓圖片旋轉(zhuǎn)出現(xiàn)在您的網(wǎng)站上并不是一件容易的事情。下面是一些關(guān)于如何使用 CSS 來(lái)旋轉(zhuǎn)圖片的技巧。

.rotate-image {
/* 支持所有現(xiàn)代瀏覽器的屬性*/
-webkit-transform: rotate(360deg); /* Safari、Chrome */
-moz-transform: rotate(360deg); /* Firefox */
-ms-transform: rotate(360deg); /* IE 9 */
-o-transform: rotate(360deg); /* Opera */
transform: rotate(360deg); /* W3C 標(biāo)準(zhǔn) */
}

代碼中，我們創(chuàng)建了一個(gè)類(lèi)名為“rotate-image”的選擇器和 transform 屬性。而這個(gè)屬性則包括了所有現(xiàn)代瀏覽器所支持的旋轉(zhuǎn)屬性，如 -webkit-transform（Safari 和 Chrome）、-moz-transform（Firefox）、-ms-transform（IE 9）和 -o-transform（Opera）。

我們使用 rotate()這個(gè)函數(shù)，讓圖片順時(shí)針旋轉(zhuǎn) 360 度。旋轉(zhuǎn)可以以像素、度數(shù)、弧度甚至是梯度為單位。像素是最簡(jiǎn)單的單位：rotate(60px)。而角度則是另一個(gè)通用的旋轉(zhuǎn)單位。在這個(gè)示例中，我們使用了 360 度，即一個(gè)完整的圓周。

另外，我們還可以使用這些屬性來(lái)定義圖片的基準(zhǔn)點(diǎn)、縮放比例等等。例如，如果您想圍繞圖片中心旋轉(zhuǎn)，可以設(shè)置transform-origin 屬性。比如：transform-origin: 50% 50%。

無(wú)論您用什么方式旋轉(zhuǎn)圖片，CSS 圖片旋轉(zhuǎn)是讓您的網(wǎng)頁(yè)變得更加獨(dú)特和富有靈活性的絕佳技巧之一。