css - 使用 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 从一个旋转的元素（720°）中取出矩阵，它看起来像这样：

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

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

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

score 5 · Accepted Answer

Matrices in CSS 3 define

a mathematical mapping from one coordinate system into another

which implies that 720deg is exactly equivalent to 360deg as you pointed out. So you will not be able to do this directly with a matrix.

However, this syntax should work for your need :

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

1 回答 1