如何在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;');