title: Smooth rotation transition CSS3?
body: <p>I am rotating my images when hovered and I want the transition to be smooth so this is what I tried:</p>
  
  <pre><code>&lt;div class="latest-thumbs"&gt;
      &lt;img src="images/thumbs/thumb01.jpg" alt="thumb" class="rotate" /&gt;
      &lt;img src="images/thumbs/thumb01.jpg" alt="thumb" class="rotate" /&gt;
      &lt;img src="images/thumbs/thumb01.jpg" alt="thumb" class="rotate" /&gt;
  &lt;/div&gt;&lt;!-- end latest-thumbs --&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.rotate {
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
  
      -webkit-transform-origin: 50% 50%;
      -moz-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
      -o-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
  
      -webkit-transition: 300ms ease all;
      -moz-transition: 300ms ease all;
      -o-transition: 300ms ease all;
      transition: 300ms ease all;
  }
  
  .rotate:hover {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
  
      -webkit-transform-origin: 50% 50%;
      -moz-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
      -o-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
  }
  </code></pre>
  
  <p>My images rotate when hovered, so there is no problem there, only, the transition is not smooth. Any ideas on how to fix this?</p>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/wntX4/" rel="noreferrer">http://jsfiddle.net/wntX4/</a></p>