Passaggio di rotazione uniforme CSS3?

Question

sto ruotando le mie immagini quando aleggiava e voglio la transizione a essere liscia quindi questo è quello che ho provato:

<div class="latest-thumbs"> 
    <img src="images/thumbs/thumb01.jpg" alt="thumb" class="rotate" /> 
    <img src="images/thumbs/thumb01.jpg" alt="thumb" class="rotate" /> 
    <img src="images/thumbs/thumb01.jpg" alt="thumb" class="rotate" /> 
</div><!-- end latest-thumbs --> 

CSS:

.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%; 
} 

mie immagini ruotano quando aleggiava, quindi non c'è problema lì, solo, la transizione non è liscia. Qualche idea su come risolvere questo problema?

JSFiddle: http://jsfiddle.net/wntX4/

Answer 1

cambio tutti i beni il CSS di transizione (sostituire facilità con la lineare)

transition: 300ms ease all; 

con

transition: 300ms linear all; 

riferiscono this

Aggiornamento

la transizione è solo per l'opacità professionista perty che sta lavorando nel modo giusto

Answer 2

Provare utilizzando transform: translate (e, naturalmente, i prefissi specifiche del browser). This article è piuttosto utile.

Answer 3

Ho appena cambiato questo nel vostro violino e funziona:

.rotate:hover { 
      transform: rotate(0deg) translate(50%); 
      -moz-transform: rotate(0deg) translate(50%); 
      -webkit-transform: rotate(0deg) translate(50%); 
      -o-transform: rotate(0deg) translate(50%); 
      -ms-transform: rotate(0deg) translate(50%); 
      -khtml-transform: rotate(0deg) translate(50%); 
      transition: all 2s ease; 
      -moz-transition: all 2s ease; 
      -webkit-transition: all 2s ease; 
      -o-transition: all 2s ease; 
      -ms-transition: all 2s ease; 
      -khtml-transition: all 2s ease; 
     } 

Penso che il browser stava sparando 2 si libra in una sola volta. Ha 1 anno ma qualcuno potrebbe fallire in questo di nuovo.