CSS3 圖片旋轉是網頁設計中常用的效果之一，可以增加網頁的美觀度和藝術性。本文將為大家介紹如何使用 CSS3 實現圖片旋轉。

CSS3 中通過 transform 屬性實現元素的旋轉效果。其中，rotate() 函數用于對元素進行旋轉，可以指定旋轉角度和旋轉軸。下面是一個基本的 CSS3 圖片旋轉的例子：

img {
transform: rotate(45deg);
}

上面的代碼表示將 img 元素沿著順時針旋轉 45 度。需要注意的是，在旋轉角度前需要添加 deg 單位。如果需要逆時針旋轉，可以將角度改為負數。

如果想要元素繞著自己的中心點進行旋轉，可以添加 transform-origin 屬性：

img {
transform: rotate(45deg);
transform-origin: center;
}

上面的代碼表示設置元素繞著自己的中心點旋轉。

除了旋轉角度和旋轉軸之外，rotate() 函數還可以接收一個可選參數，用于指定元素的傾斜程度。例如下面的代碼將元素旋轉 45 度，并向右傾斜 30 度：

img {
transform: rotate(45deg) skewX(30deg);
}

最后需要注意的是，transform 屬性只對塊級元素或某些可變元素生效，如 img、a、video 等。如果需要對行內元素進行旋轉，需要將其 display 屬性改為 block 或 inline-block。