JavaScript IE 旋转变换数学

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 分别是宽度和高度的一半。）让 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