Animazione della rotazione CSS3 onClick con prev e successivo

Question

Ho un cerchio che ho bisogno di trasformare 90 gradi quando un onclick viene sparato su una classe .Next e -90 Deangers quando cliccato su .prev

Sono riuscito a creare il seguente codice in base a ciò che potrei anche Google!

 $('.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');

        });

.

E finora funziona con un solo clic!Ma ne ho bisogno per ruotare 180 se fai clic due volte su .ult e come 360 quando fai clic su 4 volte su .prev.

Ma non riesco a farlo funzionare, ed è per questo che sto girando a te esperti :)

Answer 1

Hai bisogno di una rotazione incrementale.

Penso che questo argomento abbia dei buoni consigli:

Aumento di rotazione di 45 gradi su click w / outUtilizzo della variabile