使用CSS 3矩阵旋转360度以上 [英] Rotate more than 360 deg using css 3 matrix

问题描述

我正在使用这样的CSS过渡：

I am using CSS transitions like this:

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。

This effectively makes the div rotate 2 times for 2 seconds. Now I want to use the matrix so that I can rotate and scale the image; however the matrix does not use degrees but cos(a) and sin(a) and as we all know cos(0) = cos(360) = cos(720) etc. So using the matrix I am unable to rotate the image more than 359deg.

因此，我决定变得更聪明，使用JavaScript，我从旋转元素（720deg）中获取矩阵，看起来像这样：

So I decided to be clever and with JavaScript I took the matrix from a rotated element (720deg) and it looks like this:

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

但是使用此矩阵我无法旋转元素-我稍后将计算尺寸并应用

However using this matrix I am not able to rotate the element - I will later calculate the size and apply that too.

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

So the question is - how do I rotate an element more than 359deg using css 3 matrix transform?

推荐答案

CSS 3中的矩阵定义

Matrices in CSS 3 define

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

a mathematical mapping from one coordinate system into another

（ W3C参考），

表示您所指出的720deg完全等同于360deg。因此，您将无法直接使用矩阵执行此操作。

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;
}

这篇关于使用CSS 3矩阵旋转360度以上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！