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

标签 javascript internet-explorer matrix rotation transformation

我正在开发一个 jQuery 插件来使 block 级元素可以用鼠标旋转。现在它在非 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;            
  };

我用谷歌搜索,发现这两个页面与这个主题相关

Grady's guideZoltan's guide

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

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

最佳答案

不幸的是,IE 的 Transform Filter 没有“transform-origin”的概念。 'auto expand' sizingMethod 将使转换后的对象占用尽可能少的空间,您需要更改它的定位。

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

标签,并调整了它的 margin-left 和 margin-top。如果你去the cssSandpaper website并查看代码,您将看到确切的公式(在 cssSandpaper.js 中搜索“setMatrixFilter”)。您可以将其硬编码到您的库中,或者您可以使用 cssSandpaper 本身来执行此操作(使用 cssSandpaper.setTransform() 方法)。尽管它可能会在您的代码中增加几 KB,但我还是建议这样做,以防我将来改进处理转换的方式。

无论如何,祝你好运!

Z。

关于javascript - jQuery 元素自由旋转。在 IE 中更正变换原点和翻译,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5105585/

相关文章:

css - Internet Explorer 11 图像像素化

javascript - <meta http-equiv ="X-UA-Compatible"content ="IE=10"/> 的内容页面

javascript - 调用响应事件的JS函数时 'false'参数是什么意思

javascript - jQuery背景图片网址

javascript - 如何通过具有嵌套对象元素的JSON数组进行查找

javascript - IE 不加载整个页面的 HTML 源代码

c++ - 生成 AES (AES-256) 查找表

r - 沿矩阵中的对角线设置值

php - 如何将 php 中的二维数组旋转 90 度

javascript - jQuery平滑滚动以锚定在不同的页面上