'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'); 
});​