Javascript 旋转变换数学

我正在用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")';

---

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

对于从中心旋转，您需要将

Dx

和

Dy

添加到IE过滤器中，然后通过css添加置换，并添加css hacks以增加IE中元素的宽度和高度

您可以在我的网站上看到它是如何组合的：

---

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

实际上，有一种方法可以实现您仅使用ie矩阵转换过滤器所要实现的功能

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

首先，将对象的中心平移到原点。第二，旋转对象。第三，从原点转换回中心所属的位置

IE本身没有合成多个矩阵的能力，所以你必须自己做线性代数。假设θ是要旋转的角度，假设对象的宽度为2w，高度为2h。（所以w和h分别是半宽和半高。）让c和s分别代表cos（θ）和sin（θ）

然后，要计算的矩阵积为：

    [[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添加到过滤器中，最终结果将是旋转围绕对象的中心

我已经编写了这个程序，并在一个项目中测试了它，在这个项目中，我需要设置一个对象围绕其中心旋转的动画，这对我来说很有效

你应该检查一个全面的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库：

---

HTH

有关新问题，请参见编辑。我已经成功地旋转了它，但是它需要从中心旋转，而不是从左上角。好的，我推断它工作得很好，除了它不像其他浏览器那样挂在边缘之外。在chrome中，它会旋转，使角点稍微粘在页面外面，即元素移动以保持角点在里面。有人知道我该怎么阻止吗？那么Dx和Dy做什么呢？我不能将其包装在div或任何东西中，这需要通过纯JavaScript完成。我假设Dx和Dy是旋转的偏移位置？因为我认为这已经是正确的了，所以我只需要设置一些样式，将它向上推，然后稍微向左推，你知道怎么做吗？边距、填充？Dx和Dy在旋转后实际移动元素。在旋转之前，可以使用“相对+左/上”或“负左/上+正右/下”两种位置将其移动。移动+旋转+向后移动会导致围绕某个点旋转。这是互联网上最令人惊讶的答案。谢谢你，米凯普。我知道这篇文章已经有一年了，但是，你能告诉我你是如何得到需要计算的初始矩阵积的吗？谢谢，克泽斯特。我从我记忆中的线性代数课程中得到了矩阵积。3x3（而不是2x2）矩阵变换允许平移。在该系统中，单点表示为垂直矩阵[x y 1]，使用3x3矩阵，通过标准矩阵乘法将其转换为左侧矩阵和右侧向量。编写多个变换时，将从右向左应用变换。这里，最右边的矩阵将图像的中心转换为原点；中间旋转它；最右边的翻译过来。