title: Div rotation not working
body: <p>I am testing with CSS and got to a strange behaviour where <em>transform:rotate</em> doesn't work, here is an example where the animation doesn't happen: <a href="http://jsfiddle.net/gespinha/wK9WX/" rel="nofollow">jsFiddle</a></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.close {
      width:100px;
      height:100px;
      background:#00f;
      color:#fff;
  
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
  }
  .close:hover {
      -webkit-transform: rotate(-180deg);
      -moz-transform: rotate(-180deg);
      -o-transform: rotate(-180deg);
      -ms-transform: rotate(-180deg);
      transform: rotate(-180deg);
  }
  .close, .close:hover {
      -webkit-transition:rotate .2s ease-in-out;
      -moz-transition:rotate .2s ease-in-out;
      -o-transition:rotate .2s ease-in-out;
      -ms-transition:rotate .2s ease-in-out;
      transition:rotate .2s ease-in-out;
  }
  </code></pre>
  
  <p>Why is this not working?</p>
  
  <p>Thanks ;)</p>