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

Question

我有一个图像，我想onclick动画旋转90degress，当它再次点击我想要它动画旋转-90degrees。

对于使用CSS3旋转变换IM：

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

因为我想设置一个varable检查对象已旋转，然后采取相应的行动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

Answer 2

如果我理解正确，THIS应该这样做。

Answer 3

我认为在一般情况下，如果你打算使用transition，你应该定位特定的属性你想影响。我会考虑使用“全部”是不好的练习。

目标替代： CSS：

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

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

///jquery 

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