jquery - CSS 变换旋转不平滑

Question

我在切换开关上有一个 CSS 转换。变换将图像旋转 90 度，然后在切换时将其旋转回来。旋转到 90 度很好而且很顺畅，但返回的路很跳跃。我没有得到什么？这是我的代码和rtc。

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");
});

Answer 1

当您调用toggleClass("rotate1 rotate2").

相反，将“rotate1”类添加到您的 HTML 元素中，并且只切换“rotate2”类。

演示

Answer 2

您忘记向图像添加类。

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

这是一个更新小提琴：http: //jsfiddle.net/bqWLV/1/