Question

I am using CSS transitions like this:

div
{
   -webkit-transform: rotate(0deg);
   -webkit-transition: -webkit-transform 2s;
}
div:hover
{
   -webkit-transform: rotate(720deg);
}

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.

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.

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

Answer 1

Matrices in CSS 3 define

a mathematical mapping from one coordinate system into another

(W3C reference),

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