JavaScript 實現圖片旋轉：結合 CSS3 Transform 與 IE 濾鏡的跨瀏覽器方案

現代瀏覽器（含 IE9+）

直接使用 CSS3 transform: rotate(deg)，配合 transform-origin: center center 以中心點旋轉。

CSS 類定義

.rotate-0   { transform: rotate(0deg); }
.rotate-90  { transform: rotate(90deg); }
.rotate-180 { transform: rotate(180deg); }
.rotate-270 { transform: rotate(270deg); }
img.rotatable {
    transform-origin: center center;
    transition: transform 0.3s ease;
}

JS 切換

const img = document.getElementById('myImg');
let angle = 0;
document.getElementById('btnRotate').onclick = () => {
    angle = (angle + 90) % 360;
    img.className = 'rotatable rotate-' + angle;
};

IE8 及以下（Matrix 濾鏡）

IE9 已支援 transform（需 -ms-transform 前綴），IE8 需使用 filter: progid:DXImageTransform.Microsoft.Matrix(...) 計算旋轉矩陣，並手動調整 margin 使視覺居中。代碼複雜且效能差，建議**優雅降級**：IE8 顯示提示「請升級瀏覽器」或提供伺服器端預渲染旋轉圖片。

推薦庫

jquery.rotate.js 封裝了跨瀏覽器邏輯，一行代碼即可：$('#img').rotate({angle:0, animateTo:90});