title: CSS rotation cross browser with jquery.animate()
body: <p>I'm working on creating a cross-browser compatible rotation (ie9+) and I have the following code in a <a href="http://jsfiddle.net/UB2XR/21/">jsfiddle</a></p>
  
  <pre><code>$(document).ready(function () { 
      DoRotate(30);
      AnimateRotate(30);
  });
  
  function DoRotate(d) {
  
      $("#MyDiv1").css({
            '-moz-transform':'rotate('+d+'deg)',
            '-webkit-transform':'rotate('+d+'deg)',
            '-o-transform':'rotate('+d+'deg)',
            '-ms-transform':'rotate('+d+'deg)',
            'transform': 'rotate('+d+'deg)'
       });  
  }
  
  function AnimateRotate(d) {
  
          $("#MyDiv2").animate({
            '-moz-transform':'rotate('+d+'deg)',
            '-webkit-transform':'rotate('+d+'deg)',
            '-o-transform':'rotate('+d+'deg)',
            '-ms-transform':'rotate('+d+'deg)',
            'transform':'rotate('+d+'deg)'
       }, 1000); 
  }
  </code></pre>
  
  <p>The CSS and HTML are really simple and just for demo:</p>
  
  <pre><code>.SomeDiv{
      width:50px;
      height:50px;       
      margin:50px 50px;
      background-color: red;}
  
  &lt;div id="MyDiv1" class="SomeDiv"&gt;test&lt;/div&gt;
  &lt;div id="MyDiv2" class="SomeDiv"&gt;test&lt;/div&gt;
  </code></pre>
  
  <p>The rotation works when using <code>.css()</code> but not when using <code>.animate()</code>; why is that and is there a way to fix it?</p>
  
  <p>Thanks.</p>