Animar la rotación CSS3 ONCLICK CON PREV Y SIGUE

Question

Tengo un círculo que necesito para transformar 90 grados cuando se enciende un enllick en una clase .Next y -90 grados cuando se hace clic en .Prev

¡He logrado crear el siguiente código en función de lo que yo también podría buscar 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');

        });

y hasta ahora funciona con solo un clic!Pero lo necesito para rotar 180 si haces clic dos veces en .Next y como 360 cuando haces clic 4 veces en .Prev.

Pero parece que no puedo hacerlo funcionando, por lo que ahora estoy pasando a ustedes expertos :)

Answer 1

Necesitas rotación incremental.

Creo que este tema tiene algunos buenos consejos para usted:

incremento de rotación de 45 grados en el clic w / fuerausando variable