Reibungsloser Rotationsübergang CSS3?

Question

ich meine Bilder am dreht, wenn schwebte und ich möchte der Übergang glatt sein, so ist es das, was ich versucht:

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

Meine Bilder drehen, wenn schwebte, so gibt es keine Problem dort nur, der Übergang ist nicht glatt. Irgendwelche Ideen, wie das zu beheben ist?

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

Answer 1

Änderung alle Übergang CSS-Eigenschaft (ersetzen Leichtigkeit, mit linear)

transition: 300ms ease all; 

mit

transition: 300ms linear all; 

siehe this

aktualisieren

Ihr Übergang ist nur für Opazität Profi perty, die in der richtigen Weise

Answer 2

Versuchen Sie es mit transform: translate (und natürlich browserspezifische Präfixe). This article ist ziemlich hilfreich.

Answer 3

Ich habe dies in Ihrer Geige gerade geändert funktionieren und es funktioniert:

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

Ich denke, dass Browser 2 schwebt auf einmal feuert. Es ist 1 Jahr alt, aber einige könnten wieder versagen.