javascript - jQuery元素自由旋转。在IE中更正转换原点和翻译

我正在开发一个jQuery插件，以使鼠标可以旋转一个块级元素。现在，它可以在非IE浏览器中按预期工作，但是在Internet Explorer中旋转时会出现奇怪的行为。

演示在此处testerski.antaranian.me托管，旋转插件脚本为

    $.fn.roll = function(angle){
    var $this = this,
        ie = !jQuery.support.leadingWhitespace;
    if (ie) {
        var cosAngle = parseFloat(parseFloat(Math.cos(angle.rad())).toFixed(8)),
            sinAngle = parseFloat(parseFloat(Math.sin(angle.rad())).toFixed(8)),
            tx = 0, ty = 0,
            matrixFilter = '(M11=' + cosAngle + ', '
                    + 'M12=' + -sinAngle + ', '
                    + 'M21=' + sinAngle + ', '
                    + 'M22=' + cosAngle + ','
                    + 'sizingMethod=\'auto expand\')',
            filter = 'progid:DXImageTransform.Microsoft.Matrix' + matrixFilter,
            css = {
                '-ms-filter': filter,
                'filter': filter
              };
            debug.log(filter);
        var matrix = $M([
                  [cosAngle, -sinAngle, tx],
                  [sinAngle, cosAngle, ty],
                  [0, 0, 1]
                ]);
        debug.log(matrix);
        $this.transformOrigin(matrix);
        $this.fixIeBoundaryBug(matrix);

    } else {
        var css = {
                '-webkit-transform': 'rotate(' + angle + 'deg)',
                '-moz-transform': 'rotate(' + angle + 'deg)',
                '-o-transform': 'rotate(' + angle + 'deg)'
              };
    }
    $this.css(css);
    return this;
  };

我用Google搜索并找到了与此主题相关的这两页

Grady's guide和Zoltan's guide

当我得到一些与线性代数有关的会计知识时，但这对我来说很难，因此，如果有人有更简单的教程，或者知道直接的解决方案，请告诉我。

任何帮助，将不胜感激，
安塔拉尼亚语。

最佳答案

不幸的是，IE的Transform Filter没有“transform-origin”的概念。 “自动扩展” sizingMethod将使转换后的对象占用尽可能少的空间，并且您需要更改其位置。

在cssSandpaper中，我在转换后的对象周围放置了另一个

标签，并将其调整为margin-left和margin-top。如果转到the cssSandpaper website并仔细阅读代码，您将看到确切的公式(在cssSandpaper.js中搜索“setMatrixFilter”)。您可以将其硬编码到您的库中，也可以使用cssSandpaper本身执行此操作(使用cssSandpaper.setTransform()方法)。即使可能会在您的代码中增加一些KB，我还是建议这样做，以防万一我将来改进处理转换的方式。

无论如何，祝你好运!

Z.