使用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参考），

这意味着720DEG正如您指出的那样等同于360DEG。因此，您将无法直接使用矩阵。

但是，此语法应为您的需要而作用：

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