CSS3輪播不回來上徘徊了

Question

我對CSS3旋轉圖像transform

#services .info img{ 
-ms-transform: rotate(0deg) rotateY(0); /* IE 9 */ 
-webkit-transform: rotate(0deg) rotateY(0); /* Safari and Chrome */ 
-o-transform: rotate(0deg) rotateY(0); /* Opera */ 
-moz-transform:rotate(0deg) rotateY(0); /* Firefox */ 
transform: rotate(0deg) rotateY(0); 


} 


#services .info img:hover{ -ms-transform: rotate(360deg) rotateY(0); /* IE 9 */ 
-webkit-transform: rotate(360deg) rotateY(0); /* Safari and Chrome */ 
-o-transform: rotate(360deg) rotateY(0); /* Opera */ 
-moz-transform:rotate(360deg) rotateY(0); /* Firefox */ 
transform: rotate(360deg) rotateY(0); transition:.3s; 
} 

問題是圖像不旋轉回來時，我徘徊了元素。

Answer 1

真正的問題不在於它旋轉回來，真正的問題是它瞬間完成。

您需要瑟THA基本元件上過渡到應用它無論在懸停在和懸停出

這個CSS的工作原理：

#test { 
    width: 60px; 
    -ms-transform: rotate(0deg); /* IE 9 */ 
    -webkit-transform: rotate(0deg); /* Safari and Chrome */ 
    -o-transform: rotate(0deg); /* Opera */ 
    -moz-transform:rotate(0deg); /* Firefox */ 
    transform: rotate(0deg); 
    -webkit-transition: .3s; 
    transition: .3s; 
} 

#test:hover { 
    -ms-transform: rotate(360deg); /* IE 9 */ 
    -webkit-transform: rotate(360deg); /* Safari and Chrome */ 
    -o-transform: rotate(360deg); /* Opera */ 
    -moz-transform:rotate(360deg); /* Firefox */ 
    transform: rotate(360deg); 
} 

demo