Płynne przejście przejścia CSS3?

Question

ja obracając moje obrazy, gdy unosił i chcę przejście będzie gładka więc to, co starałem:

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

Moje obrazy obracać kiedy unosił, więc tam nie ma problem tam, tylko, przejście nie jest płynne. Wszelkie pomysły, jak to naprawić?

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

Answer 1

zmiana wszelka własność CSS przejściowy (wymienić łatwość, z liniowej)

transition: 300ms ease all; 

z

transition: 300ms linear all; 

odnoszą this

Aktualizacja

swoje przejście jest tylko dla nieprzejrzystości zawodowiec Perty że działa we właściwy sposób

Answer 2

spróbuj użyć (prefiksy przeglądarek specyficzne i oczywiście) transform: translate. This article jest bardzo pomocny.

Answer 3

Właśnie zmienił to w skrzypcach i to działa:

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

myślę, że przeglądarka strzelał 2 zawisa na raz. Ma 1 rok, ale czasami może się to nie udać.