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变换旋转不平滑

回答

相关问题