javascript - css3/jqueryを使用した要素の「toggel」回転

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

フィドル

Answer 2

私が正しいと理解していれば、これでうまくいくはずです。