在現代Web開發中，圖片旋轉是一個常見的功能需求，而JavaScript為我們提供了實現這一需求的方法。通過JavaScript，我們可以輕松地實現圖片旋轉和翻轉的動畫效果，使得網站更加可視化和生動。 舉個例子，假如我們有一張照片需要旋轉90度。我們可以通過以下代碼達到效果：

var img = document.getElementById('myImage');
img.style.transform = 'rotate(90deg)';

以上代碼將圖片元素的transfrom樣式屬性設為'rotate(90deg)'，即旋轉90度。同樣的，我們還可以設定其他旋轉的角度、翻轉效果、旋轉方向等。具體代碼如下：

// 旋轉270度，即逆時針旋轉90度
img.style.transform = 'rotate(-90deg)';
// 水平翻轉
img.style.transform = 'scaleX(-1)';
// 垂直翻轉
img.style.transform = 'scaleY(-1)';
// 組合效果，逆時針旋轉90度并水平翻轉
img.style.transform = 'rotate(-90deg) scaleX(-1)';
// 組合效果，順時針旋轉90度并垂直翻轉
img.style.transform = 'rotate(90deg) scaleY(-1)';

除了通過style屬性修改元素樣式外，我們還可以通過CSS類來進行樣式管理。定義旋轉和翻轉的CSS類如下：

.rotate90 { transform: rotate(90deg); }
.rotate180 { transform: rotate(180deg); }
.rotate270 { transform: rotate(270deg); }
.flip-h { transform: scaleX(-1); }
.flip-v { transform: scaleY(-1); }

然后我們只需要在JavaScript代碼中動態地替換元素的className屬性即可：

var img = document.getElementById('myImage');
img.className = 'rotate90 flip-h';

通過這種方式，我們既可以輕松地實現圖片旋轉與翻轉的效果，又可以使代碼更加清晰和易于維護。 總之，使用JavaScript實現圖片旋轉是一項簡單但十分有用的功能。通過把握好基本的旋轉和翻轉操作，我們可以更加穩健地開發出有趣、生動的Web應用程序。