Animar rotação CSS3 ao clicar com anterior e próximo

Question

Eu tenho um círculo que preciso transformar 90 graus quando um onclick é disparado em uma classe .next e -90 graus quando clicado em .prev

Consegui criar o código a seguir com base no que eu também poderia pesquisar no 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 até agora funciona com apenas um clique!mas preciso que ele gire 180 se você clicar duas vezes em .next e 360 ​​quando clicar 4 vezes em .prev.

Mas não consigo fazê-lo funcionar, e é por isso que agora estou recorrendo a vocês, especialistas :)

Answer 1

Você precisa de rotação incremental.

Acho que este tópico tem algumas boas dicas para você:

Incremento de rotação de 45 graus ao clicar sem usar variável