title: Rotate more than 360 deg using css 3 matrix
body: <p>I am using CSS transitions like this:</p>
  
  <pre><code>div
  {
     -webkit-transform: rotate(0deg);
     -webkit-transition: -webkit-transform 2s;
  }
  div:hover
  {
     -webkit-transform: rotate(720deg);
  }
  </code></pre>
  
  <p>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. </p>
  
  <p>So I decided to be clever and with JavaScript I took the matrix from a rotated element (720deg) and it looks like this:</p>
  
  <pre><code>-webkit-transform: matrix(1, -0.0000000000000004898587196589413, 0.0000000000000004898587196589413, 1, 0, 0);
  </code></pre>
  
  <p>However using this matrix I am not able to rotate the element - I will later calculate the size and apply that too.</p>
  
  <p>So the question is - how do I rotate an element more than 359deg using css 3 matrix transform?</p>