使轮子在IE中旋转

Question

我有以下代码用JS和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...*/
     }
};

它适用于除 IE 以外的所有浏览器.

在这里查看一个工作演示:http://jsfiddle.net/maniator/H5LKy/129/

如何更改我的功能,以便当您在IE中单击"旋转轮"时,滚轮将旋转正确(并获得相同的结果)？

Answer 1

在 Internet Explorer 中，-ms-transition在您的 CSS 和-ms-transformJavaScript 中使用 Internet Explorer。请参阅此处的工作示例（仅从 IE9 开始支持，并且像往常一样，IE 很糟糕并且解析 javascript，所以这就是它非常慢的原因）。

对于低于 9 的 IE 版本，以下代码将旋转 45 度：

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

这些数字以弧度而不是角度为单位。