3矩阵旋转360度以上

3矩阵旋转360度以上

本文介绍了使用CSS 3矩阵旋转360度以上的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

08-16 08:06