Making the wheel rotate in IE

Question

I have the following code for spinning a wheel with JS and CSS:

var prefix = (function() {
    if (document.body.style.MozTransform !== undefined) {
        return "MozTransform";
    }
    else if (document.body.style.WebkitTransform !== undefined) {
        return "WebkitTransform";
    }
    else if (document.body.style.OTransform !== undefined) {
        return "OTransform";
    }
    else {
        return "transform";
    }
}()),
    rotateElement = function(element, degrees) {
        var val = "rotate(-" + degrees + "deg)";
        element.style[prefix] = val;
        element.setAttribute("data-rotation", degrees);
    },
 spinModifier = function() {
      return Math.random() * 10 + 25;
 },
 modifier = spinModifier(),
 slowdownSpeed = 0.5,
spinWheelfn = function(amt) {
    clearTimeout(spinTimeout);
     modifier -= slowdownSpeed;
     if (amt == undefined) amt = parseInt(wheel.getAttribute('data-rotation'));
     rotateElement(wheel, amt);
     if (modifier > 0) {
        spinTimeout = setTimeout(function() {
            spinWheelfn(amt + modifier);
        }, 1000 / 5);
     } else {
        modifier = spinModifier();
        /**some other code...*/
     }
};

It works fine in all browsers except for IE.

See a working demo here: http://jsfiddle.net/maniator/H5LKy/129/

How do I change my function so that when you click on "Spin Wheel" in IE, the wheel will spin correcty (and get the same results)?

Answer 1

In internet explorer, use -ms-transition in your css and -ms-transform in your javascript for internet explorer. See here for the working example (Only supported from IE9 onwards, and as usual IE is crappy and parsing javascript so that's why it's terribly slow).

For IE versions lower than 9, the following code would rotate 45 degrees:

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */

The numbers are in radians instead of degrees.

Answer 2

I would highly recommend using jQuery for this, with this plugin (you don't want to have to re-invent the wheel :P, get it?):

This is a simple plugin to allow you to rotate images (any angle) directly on client side (for ex. user generated content), and animate them using own functions. Main focus is to unify this behavior across different browsers.

Supported Browsers:

• Internet Explorer 6.0 >
• Firefox 2.0 >
• Safari 3 >
• Opera 9 >
• Google Chrome

http://code.google.com/p/jqueryrotate/

http://code.google.com/p/jqueryrotate/wiki/Examples