在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中点击“Spin Wheel”时，如何更改我的函数，使轮子正确旋转（并获得相同的结果）？

- Naftali

---

这个 JSFiddle 有进展了吗？http://jsfiddle.net/H5LKy/130/ 我添加了一些缺失的分号，因为 IE 有时会抱怨。此外，由于我们没有轮子图像，所以很难看到效果 :) - Mathew Thompson

我已经尝试解决这个问题了。。。 http://jsfiddle.net/rlemon/H5LKy/131/ 然而我的矩阵计算是错误的？有没有人能够详细解释一下？ - rlemon

@mattytommo，轮子图像已经在那儿。 - Naftali

@mattytommo 它在那里...出于某种奇怪的原因，对我而言它消失了...它是在imgur上托管的。在新标签页中打开图像，刷新该标签页，然后刷新fiddle，一切又恢复正常了。 - rlemon

你想学习那些已经被弃用的东西吗？即使是由创建者自己？微软已经放弃了DXImage Transform滤镜的支持。学习使用一种在不久的将来将不存在的技术是浪费时间的，应该予以反对；尤其是当已经有抽象化的方法可以为您解决这些旧的边缘情况时。 - Ivan Castellanos

Answer 1

我强烈推荐在这方面使用jQuery，使用此插件（您不想重新发明轮子:P，明白吗？）：

这是一个简单的插件，允许您在客户端直接旋转图像（任意角度）（例如用户生成的内容），并使用自己的函数对它们进行动画处理。主要重点是统一不同浏览器之间的这种行为。

支持的浏览器： - 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

- Sarke

---

@Neal，那就看看jqueryrotate的源代码吧，里面有很多if (IE)。@CamiloMartin，:P - Sarke

Answer 2

在Internet Explorer中，使用-ms-transition在你的CSS和-ms-transform在你的JavaScript中。点击这里查看工作示例（仅在IE9及以上版本支持，通常情况下IE解析JavaScript很慢，这就是为什么它运行得非常缓慢）。对于低于IE9版本的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 */

数字使用弧度而不是角度。

- Wesley

---

在旧版本的IE中仍然无法工作（至少要支持IE8）。 - Naftali

即使在IE9中，它的流畅度也不如其他浏览器。 - Naftali

我使用了自己的角度转弧度方法在IE中尝试过它，但它只是使轮子变大了... http://jsfiddle.net/maniator/H5LKy/168/show/ - Naftali

不行，那还是不起作用：http://jsfiddle.net/maniator/H5LKy/176/ 在IE中只会使它变得更大或更小。 - Naftali

朋友们，旋转矩阵将具有m11=cos(t)，m12=-sin(t)，m21=sin(t)，m22=cos(t)的形式，其中t是逆时针旋转角度。在js中，它将以弧度为单位。OP中的数字是您在45度= pi / 2弧度时获得的结果。 - Gene