JavaScript旋转IE8

Question

JavaScript旋转IE8

3

我在谷歌和stackoverflow上搜索了解决方案，但是无法找到答案。我的问题是在Internet Explorer 8中无法旋转元素。我使用了这个网站和这个stackoverflow主题作为资源，并最终得出以下结果：

function rotateElement(e, deg) {
    var deg_str = deg + "";
    var rotate_transform = "rotate(" + deg + "deg)";

    var degreeToIEMatrix = function(deg){   
        var deg2radians = Math.PI / 180;
        var rad = deg * deg2radians ;
        var costheta = Math.cos(rad);
        var sintheta = Math.sin(rad);

        var M11 = costheta;
        var M12 = -sintheta;
        var M21 = sintheta;
        var M22 = costheta;

        return 'M11=' + M11 + ', M12=' + M12 + ', M21=' + M21 + ', M22=' + M22;
    };

   /* @cc_on
       matrix_str = degreeToIEMatrix(deg);
       document.write(matrix_str);
       filter_str = "progid:DXImageTransform.Microsoft.Matrix(" + matrix_str + ", sizingMethod='auto expand')";
   @*/

    e.style["rotation"] = deg_str + "deg";      // CSS3
    e.style.MozTransform = rotate_transform;    // Moz
    e.style.OTransform = rotate_transform;      // Opera
    e.style.WebkitTransform = rotate_transform; // Webkit/Safari/Chrome
    e.style["zoom"] = "1"; // ??? Probably IEs

    /* @cc_on
        e.style.filter = filter_str;            // IE 6/7
        e.style.MsFilter = filter_str;          // IE 8
    @*/
}

使用Internet Explorer 8，该元素无法旋转。是我的代码有问题还是本来就不行？我知道可以使用JQuery来解决这个问题，但我不想依赖于一个库。我查看了JQuery的源代码，但没有找到答案。

- Henderk

http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/ - SLaks

@SLaks 第一个使用库，第二个是CSS（在后台使用JQuery）。 - Henderk

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mohsen · Accepted Answer

function rotate(angle, elem){
        if (angle >= 0) {
        var rotation = Math.PI * angle / 180;
    } else {
        var rotation = Math.PI * (360+angle) / 180;
    }
        var c = Math.cos(rotation),
        s = Math.sin(rotation);
       elem.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11="+c+",M12="+(-s)+",M21="+s+",M22="+c+",SizingMethod='auto expand')";
}

这只适用于IE浏览器！;)