javascript - 使用CSS3/jQuery来回切换元素的来回旋转

我有一个图像，我想onclick动画旋转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;
    });
});

最佳答案

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

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

关于javascript - 使用CSS3/jQuery来回切换元素的来回旋转，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11817879/