CSS 圖片旋轉是令人驚嘆的設計技巧，為您的網頁增添了一份令人賞心悅目的風格。然而，讓圖片旋轉出現在您的網站上并不是一件容易的事情。下面是一些關于如何使用 CSS 來旋轉圖片的技巧。

.rotate-image {
/* 支持所有現代瀏覽器的屬性*/
-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 標準 */
}

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

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

另外，我們還可以使用這些屬性來定義圖片的基準點、縮放比例等等。例如，如果您想圍繞圖片中心旋轉，可以設置transform-origin 屬性。比如：transform-origin: 50% 50%。

無論您用什么方式旋轉圖片，CSS 圖片旋轉是讓您的網頁變得更加獨特和富有靈活性的絕佳技巧之一。