如何在Internet Explorer中旋轉

Question

有什麼方法可以在IE中旋轉元素？我目前使用：

-webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    transform: rotate(-90deg); 

旋轉元素，除了IE瀏覽器幾乎所有的瀏覽器，並從我讀過IE瀏覽器不支持此功能。有其他選擇嗎？例如JavaScript或其他將啓用旋轉的CSS屬性。

Answer 1

您可以使用：矩陣條目可以，如果你想要做一些FANCE東西與JS很容易計算：

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 

旋轉的值可以是1,2,3或4.這些數字代表90,180,270或360度分別旋轉。

不幸的是，這種技術只能支持90度增量的旋轉，當嘗試做某些類型的動畫或懸停在效果上時，這絕對會令人討厭。

您還可以查看不太易用的matrix過濾器以瞭解其他旋轉效果。這裏有一個很好的翻譯工具來幫助你：

http://www.useragentman.com/IETransformsTranslator/

Answer 2

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 

您可以閱讀here

Answer 3

可以使用過濾器：

filter: progid:DXImageTransform.Microsoft.Matrix(...); 

矩陣的優點是你可以旋轉任意度，但你需要的矩陣值。幸運的是，一個工具：

http://css3please.com/

編輯：

http://msdn.microsoft.com/en-us/library/ms533014(v=vs.85).aspx

Answer 4

試試這個，

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 

還有一個漂亮的jQuery插件對於這一點，

jQuery rotate

附：該代碼被限制爲90度旋轉，但不插件

Answer 5

我最近需要此爲IE7和8，以及決定寫一小片JavaScript來處理計算IE特定矩陣值和偏移的滋擾。

爲腳本來自這些鏈接的想法和解釋：

http://www.boogdesign.com/examples/transforms/matrix-calculator.html

http://extremelysatisfactorytotalitarianism.com/blog/?p=1002

而這裏的腳本（我使用節點運行它，但你也可以過去它在瀏覽器控制檯）：

// --- initialization 

var w = 712; // object width 
var h = 744; // object height 
var deg = 48; // object rotation in degrees 

// --- utils 

function deg2rad(deg) { 
    return deg * (2 * Math.PI)/360; 
} 

var rad = deg2rad(deg); 

// --- from http://www.boogdesign.com/examples/transforms/matrix-calculator.html 

var costheta = Math.cos(rad); 
var sintheta = Math.sin(rad); 

var a = parseFloat(costheta).toFixed(8); 
var c = parseFloat(-sintheta).toFixed(8); 
var b = parseFloat(sintheta).toFixed(8); 
var d = parseFloat(costheta).toFixed(8); 

console.log('-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=' + a + ', M12=' + c + ', M21=' + b + ', M22=' + d + ', sizingMethod=\'auto expand\')";'); 
console.log('filter: progid:DXImageTransform.Microsoft.Matrix(M11=' + a + ', M12=' + c + ', M21=' + b + ', M22=' + d + ', sizingMethod=\'auto expand\');'); 

// --- from http://extremelysatisfactorytotalitarianism.com/blog/?p=1002 

// calculate bounding box width and height 
var bb_w = Math.abs(h * Math.sin(rad)) + Math.abs(w * Math.cos(rad)); 
var bb_h = Math.abs(h * Math.cos(rad)) + Math.abs(w * Math.sin(rad)); 

// calculate offsets 
var offset_left = Math.floor((w/2) - (bb_w/2)); 
var offset_top = Math.floor((h/2) - (bb_h/2)); 

console.log('left: ' + offset_left + 'px;'); 
console.log('top: ' + offset_top + 'px;');