Animate CSS3回転OnClick PrevとNext

Question

onClickが.NEXTクラスで起動され、-90°が.pelev

でクリックしたときに-90°を変えるために90度の変換が必要な円があります。

私は自分自身にも私が自分自身にできることに基づいて次のコードを作成することができました！

 $('.next').on('click',function(e){

          $('.object').animate({textIndent: 90}, {
            step: function(now,fx) {
              $(this).css('-webkit-transform','rotate('+now+'deg)').css('-moz-transform','rotate('+now+'deg)').css('transform','rotate('+now+'deg)');
            },
            duration:2000
          },'linear');

        });

        $('.prev').on('click',function(e){

          $('.object').animate({textIndent: 0}, {
            step: function(now,fx) {
              $(this).css('-webkit-transform','rotate('+now+'deg)').css('-moz-transform','rotate('+now+'deg)').css('transform','rotate('+now+'deg)');
            },
            duration:2000
          },'linear');

        });

.

そしてこれまでのところ、それはただワンクリックで動作します！しかし、.PELEVの4回をクリックすると、180を2回クリックすると180を回転させる必要があります。

しかし、私はそれを働かせるようには思えないようです、それが私が今あなたに専門家を監督しているのです:)

Answer 1

増分回転が必要です。

私はこのトピックがあなたにとって良いヒントを持っていると思います：

45度回転インクリメントクリックw / out変数

を使用する