Pürüzsüz rotasyon geçişi CSS3?

Question

süpürdü zaman benim görüntüleri dönen ediyorum ve geçiş pürüzsüz olmasını istiyorum yani bu denedim budur:

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

Resimlerim süpürdü zaman döndürmek, böylece herhangi yoktur Orada problem, sadece geçiş düzgün değil. Bunu nasıl düzelteceğinizle ilgili bir fikrin var mı?

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

Answer 1

değişikliğin tüm geçiş css özellik yalnızca opaklık içindir

transition: 300ms linear all; 

this

Güncelleme

geçişinizi bakın

ile

transition: 300ms ease all; 

(doğrusal kolaylığı değiştirin) profesyonel doğru şekilde çalıştığını perty

Answer 2

deneyin kullanılarak transform: translate (ve tabii tarayıcıya özel önek). This article oldukça yararlıdır.

Answer 3

Ben sadece keman bu değişti ve çalışır:

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

O tarayıcı seferde 2 fareyi üzerine ateş düşünüyorum. 1 yaşında ama someong yine buna engel olabilir.