在前端開發中，經常會使用到CSS來美化頁面效果。其中，圖片的旋轉是一個常見的需求。下面我們來看一下如何使用CSS來實現圖片旋轉的效果。

img {
transform: rotate(30deg);
}

上述代碼中，我們使用了CSS的transform屬性來實現圖片旋轉的效果。其中，rotate()函數可以接受一個參數，表示旋轉的角度。這里我們傳入了30度，表示將圖片順時針旋轉30度。

除了rotate()函數外，CSS的transform屬性還支持其他多種變換，如平移、縮放、斜切等。可以根據實際需求來靈活應用。

img {
transform: rotate(30deg) translateX(50px);
}

上述代碼中，我們在旋轉的基礎上，使用了translateX()函數將圖片沿X軸平移了50px。這樣可以讓圖片更加生動有趣。

需要注意的是，CSS的transform屬性是一個變換函數序列，可以同時使用多個函數來實現多種效果。

img {
transform: rotate(30deg) scale(1.2) skew(-10deg) translateX(50px);
}

上述代碼中，我們將旋轉、縮放、斜切和平移四種變換組合在一起。這樣可以實現更加炫酷的效果。

通過以上的介紹，我們可以看到CSS可以輕松實現圖片的旋轉效果。同時，CSS的變換函數還有很多其他用法，可以根據實際需求來自由發揮。