title: Rotating a div using jQuery that's supported by IE9
body: <p>I have some divs (basically just images) that I fade in as they rotate 360 degrees.  Everything works perfectly in all major browsers, just not IE.</p>
  
  <p>CSS3 code that works</p>
  
  <pre><code>#box
  {
      width: 400px;
      height: 400px;
      display: inline-block;
      position: absolute;
      transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transition: all 0.8s 1s ease-in-out;
      -webkit-transition: all 0.8s 1s ease-in-out;
      -moz-transition: all 0.8s 1s ease-in-out;
      -o-transition: all 0.8s 1s ease-in-out;
      opacity:0;
  }
  
  #box.animate
  {
      transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      opacity:100;
  }
  </code></pre>
  
  <p>Right now my jQuery code is</p>
  
  <pre><code>$("#box").addClass("animate");
  </code></pre>
  
  <p>That's about the extent of my jQuery knowledge unfortunately.  I know I can use the <code>fadeIn()</code> function to take care of the opacity setting, but what's available to take care of the rotation part?  Using any sort of plugin is really a last resort sort of thing too.  I just need it to work in IE9.  If it works in Chrome, FF, and Opera, that would be splendid as well, but not a must.</p>
  
  <p>Isn't there something like</p>
  
  <pre><code>$("#box").animate(function() {
      $(this).fadeIn(1000).rotate(360);
  });
  </code></pre>
  
  <p>I feel like it's a fairly easy solution, I just can't think of how to do it.  Also, I have no idea if that code is valid or not, I'm no JS guru.</p>