CSS變換旋轉不平滑

我對切換進行了css變換。變換將圖像旋轉90度，然後開啓旋轉。旋轉到90度很好而且很平穩，但是回來的路很陡。我沒有得到什麼？這是我的代碼和fiddle與rtc。CSS變換旋轉不平滑

CSS：

.rotate1 { 
    -webkit-transform: rotate(0deg) translate3d(0, 0, 0); 
    -moz-transform: rotate(0deg); 
     -o-transform: rotate(0deg); 
     -ms-transform: rotate(0deg); 
      transform: rotate(0deg); 
    -o-transition:.5s; 
    -ms-transition:.5s; 
    -moz-transition:.5s; 
    -webkit-transition:.5s; 
    transition:.5s; 
     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0); 
} 

.rotate2 { 
    -webkit-transform: rotate(90deg) translate3d(0, 0, 0); 
    -moz-transform: rotate(90deg); 
     -o-transform: rotate(90deg); 
     -ms-transform: rotate(90deg); 
      transform: rotate(90deg); 
    -o-transition:.5s; 
    -ms-transition:.5s; 
    -moz-transition:.5s; 
    -webkit-transition:.5s; 
    transition:.5s; 
     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); 
}

JS：

$("img").on('click', function(){ 
    $(this).toggleClass("rotate1 rotate2"); 
});

來源

2013-07-22 Jonny Sooter

你有沒有在各種瀏覽器進行測試呢？如果是這樣，這個問題是持續不斷的，還是瀏覽器的具體？ – Jeremy

IE9和Firefox是我們將要使用它的唯一瀏覽器。在Firefox中這個問題很明顯，在IE9中這兩種方式都不順利。 –

你忘了一類添加到圖像。

<img src="..." class="rotate1" />

這裏有一個更新小提琴：http://jsfiddle.net/bqWLV/1/

來源

2013-07-22 19:09:52

你切換兩個「rotate1」和「rotate2」來激活，當你調用toggleClass("rotate1 rotate2")同時禁止。

相反，將「rotate1」類添加到您的HTML元素並僅切換「rotate2」類。

Demo

來源

2013-07-22 19:08:06 Jake

任何建議讓它在IE9中平滑？ –

IE9不支持CSS3轉換。你不得不放棄這種方法，並去尋找類似jQuery動畫功能的東西。 – Jake

CSS變換旋轉不平滑

回答

相關問題