Question

So I searched google and stackoverflow for a solution but I can not find an answer. My problem is that I can not rotate an element with Internet Explorer 8.
I used
this site and this stackoverflow topic as resources and finally came to the following result:

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
    @*/
}

With Internet Explorer 8 the element does not rotate. Is there a bug in my code or is it bad anyway? I know I could use JQuery for this, but I don’t want to depend on a library. I looked up the source of JQuery but could not find an answer there.

Answer 1

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')";
}

It’s just for IE! 😉