使用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矩阵变换旋转超过359deg的元素？

Answer 1

CSS 3中的矩阵定义

  

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

（W3C reference），

这意味着720deg完全等同于你指出的360deg。因此，您无法直接使用矩阵进行此操作。

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

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