使用 css 3 矩阵旋转超过 360 度答案

【问题标题】：Rotate more than 360 deg using css 3 matrix使用 css 3 矩阵旋转超过 360 度
【发布时间】：2012-12-06 21:00:25
【问题描述】：

我正在使用这样的 CSS 过渡：

div
{
   -webkit-transform: rotate(0deg);
   -webkit-transition: -webkit-transform 2s;
}
div:hover
{
   -webkit-transform: rotate(720deg);
}

这有效地使 div 旋转 2 次，持续 2 秒。现在我想使用矩阵来旋转和缩放图像；但是矩阵不使用度数，而是 cos(a) 和 sin(a)，众所周知， cos(0) = cos(360) = cos(720) 等。所以使用矩阵我无法旋转图像超过 359 度。

所以我决定聪明一点，使用 JavaScript 从一个旋转的元素（720 度）中获取矩阵，它看起来像这样：

-webkit-transform: matrix(1, -0.0000000000000004898587196589413, 0.0000000000000004898587196589413, 1, 0, 0);

但是使用这个矩阵我无法旋转元素 - 我稍后会计算大小并应用它。

所以问题是 - 如何使用 css 3 矩阵变换将元素旋转超过 359 度？

【问题讨论】：

【解决方案1】：

CSS 3 中的矩阵定义

从一个坐标系到另一个坐标系的数学映射

这意味着 720deg 与您指出的 360deg 完全相同。因此，您将无法直接使用矩阵执行此操作。

但是，这种语法应该可以满足您的需要：

div:hover {
    transform: scale(1.5,1.5) rotate(720deg);
    transition: transform 3s;
}

【讨论】：