'toggel'使用css3/jquery来回旋转元素

Question

我有一个图像,我想点击旋转90degress动画,当它再次点击我希望它动画旋转-90degrees.

对于使用css3变换的旋转:

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

对于jquery,我想设置一个varable来检查对象是否已经旋转,然后相应地采取行动.

我一直在努力让它发挥作用.我把一个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');
});?

小提琴