圖片旋轉是指通過改變圖片的角度使其產生旋轉效果。在網頁設計中，通過使用HTML和CSS的<div>元素，我們可以實現簡單的圖片旋轉效果。

下面我們通過幾個代碼案例來詳細解釋說明：

案例一：

<div style="transform: rotate(45deg);">
<img src="example.jpg" alt="example" />
</div>

在上面的代碼中，我們使用了CSS的transform屬性來實現圖片旋轉。通過設置rotate()函數的參數來指定旋轉的角度，如上例中的45度。

案例二：

<div class="rotate-90">
<img src="example.jpg" alt="example" />
</div>
<style>
.rotate-90 {
transform: rotate(90deg);
}
</style>

這個案例中，我們使用了CSS的class來實現圖片旋轉。在style標簽中定義了.rotate-90類，并通過transform屬性將圖片旋轉90度。

案例三：

<div onmouseover="rotateImage(this)" onmouseout="resetImage(this)">
<img src="example.jpg" alt="example" />
</div>
<script>
function rotateImage(element) {
element.style.transform = "rotate(180deg)";
}
<br>
function resetImage(element) {
element.style.transform = "rotate(0deg)";
}
</script>

在這個案例中，我們使用了JavaScript來實現圖片的旋轉效果。通過onmouseover和onmouseout事件來觸發對應的函數，在旋轉函數中修改元素的transform屬性實現圖片旋轉。

通過以上案例的說明，我們可以看到，通過<div>元素的transform屬性、CSS的class或JavaScript的事件和函數，我們都可以實現圖片旋轉效果。這些方法可以根據具體的需求來選擇使用，從而實現不同的效果。

需要注意的是，在使用圖片旋轉效果時，要確保圖片本身的比例和質量不會因旋轉而失真。同時，盡量不要過度使用旋轉效果，以免影響用戶體驗和網頁性能。

總體而言，通過HTML的<div>元素和CSS的transform屬性，我們可以輕松實現網頁中的圖片旋轉效果，為網頁設計增添一份動感和創意。