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) 等。所以使用矩阵我无法更多地旋转图像超过359deg。

所以我决定变聪明，使用 JavaScript 我从旋转元素 (720deg) 中获取矩阵，它看起来像这样:

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

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

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

Answer 1

CSS 3 中的矩阵定义

a mathematical mapping from one coordinate system into another

( W3C reference ),

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

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

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