问题描述
我正在使用这样的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
(),
表示您所指出的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度以上的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!