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

Question

我正在使用这样的 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 从旋转元素 (720deg) 中获取矩阵，它看起来像这样：

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

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

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

Answer 1

CSS 3 中的矩阵定义

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

（W3C 参考），

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

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

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