javascript - 使用 css3/jquery 来回“切换”元素的旋转

Question

我有一张图片，我想单击它以动画形式旋转 90 度，当它再次单击时我希望它以动画形式旋转 -90 度。

对于使用 css3 变换的旋转 im:

-moz-transform:rotate(90deg); 
-webkit-transform:rotate(90deg); 
-ms-transform:rotate(90deg);

对于 jquery，我想设置一个变量来检查对象是否已旋转，然后采取相应的行动。

我一直很难让它发挥作用。我整理了一个 JsFiddle .

这是我使用的代码:

var turn = true;
$("#button").click(function () {
    $("#shape").css('transform', function(index) {
      return index * 90;
    });
});

Answer 1

添加一些过渡和旋转类，然后切换该类:

CSS:

#shape  { width: 100px; 
          height: 200px; 
          background:#000;
          -moz-transition: all 1s ease;
          -webkit-transition: all 1s ease;
          -o-transition: all 1s ease;
           transition: all 1s ease;
         }

.rotate {-moz-transform: rotate(90deg);
         -webkit-transform:rotate(90deg); 
         -ms-transform:rotate(90deg);
         -o-transform:rotate(90deg);
         }

js:

$("#button").click(function() {
    $("#shape").toggleClass('rotate');
});​

FIDDLE