Question

我正在使用JavaScript设置元素的旋转，我知道如果你想设置为90度角这很容易实现，但这不是我想要的。因为我想设置为20度的奇怪角度，我需要使用变换滤镜。我知道这个的布局，但我想知道如何计算这四个值，起初我试过这个。

calSin = Math.sin(parseInt(css[c]));
calCos = Math.cos(parseInt(css[c]));
element.style.filter = 'progid:DXImageTransform.Microsoft.Matrix(M11=' + calCos + ', M12=-' + calSin + ',M21=' + calSin + ', M22=' + calCos + ', sizingMethod="auto expand")';

但正如你所看到的，这种情况永远无法发挥作用，我只是在暗中捅了一下。由于数学不是我的强项，我想知道是否有人可以帮我计算数值？

感谢。

修改

好！得到它使用以下代码。

radians = parseInt(css[c]) * Math.PI * 2 / 360;
calSin = Math.sin(radians);
calCos = Math.cos(radians);
element.style.filter = 'progid:DXImageTransform.Microsoft.Matrix(M11=' + calCos + ', M12=-' + calSin + ',M21=' + calSin + ', M22=' + calCos + ', sizingMethod="auto expand")';

但现在的问题是如何让它从中心旋转而不是左上角？

Answer 1

实际上有一种方法可以使用ie矩阵变换滤波器来完成你想要做的事情。

除了M11，M12，M21，M22之外，矩阵还具有两个附加属性：Dx和Dy用于平移。不幸的是，你不能只是按一定的数量进行翻译。为了围绕对象的中心旋转，您需要组成三个变换。

首先，将对象的中心转换为原点。其次，旋转对象。第三，从原点转换回中心所属的位置。

IE本身无法编写多个矩阵，因此您必须自己完成线性代数。假设theta是您想要旋转的角度，并假设对象的宽度为2w，而其高度为2h。（所以w和h分别是HALF的宽度和高度。）让c和s分别代表cos（theta）和sin（theta）。

您要计算的矩阵产品是：

    [[1 0 w] [[c -s 0] [[1 0 -w]
     [0 1 h]  [s  c 0]  [0 1 -h]
     [0 0 1]] [0  0 1]] [0 0  1]]

等于：

    [[ c           -s           (-wc + hs + w)]
     [ s            c           (-ws - hc + h)]
     [ 0            0                   1     ]]

因此，如果计算两个量（-wc + hs + w）和（-ws -hc + h）并将它们分别作为Dx和Dy添加到过滤器中，最终结果将是旋转是关于对象的中心。

我编写了这个并测试了一个项目，我需要动画一个物体绕其中心旋转，这对我有用。

Answer 2

要从中心旋转，您需要将Dx和Dy添加到IE过滤器，然后通过 css 添加排量并添加css hacks以增加元素' IE中的宽度和高度。

您可以在我的网站上查看它是如何组合的：http://kirilloid.ru/

实际上，这是一个与CSS相关的问题，而不是javascript。

Answer 3

您应该检查https://github.com/heygrady/transform/wiki/correcting-transform-origin-and-translate-in-ie是否有全面的50％，50％转换来源IE黑客攻击。注意，最后一个函数中有一些拼写错误，这里是正确的块：

var matrices = {
    tl: matrix.x($M([0, 0, 1])),
    bl: matrix.x($M([0, y, 1])),
    tr: matrix.x($M([x, 0, 1])),
    br: matrix.x($M([x, y, 1]))
};

您还需要Sylvester库：http://sylvester.jcoglan.com/

HTH

JavaScript IE旋转变换数学

3 个答案: