Question

我在切换时有一个css变换。变换将图像旋转90度，然后在切换时将其旋转回来。旋转到90很好，很顺利，但回来的方式是跳跃。我得不到什么？这是我的代码和fiddle与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”和“rotate2”以同时激活和停用。

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

Demo

Answer 2

您忘记在图片中添加课程。

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

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

CSS变换旋转不顺畅

2 个答案: