Animate CSS3 rotation onclick with prev and next

Question

I have a circle that i need to transform 90 degress when an onclick is fired on a .next class and -90 degress when clicked on .prev

I have managed to create the following code based on what I could Google myself too!

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

        });

And so far it works with just one click! but i need it to rotate 180 if you click twice on .next and like 360 when you click 4 times on .prev.

But I can't seem to get it working, which is why i am now turning to you experts :)

Answer 1

You need incremental rotation.

I think this topic has some good tips to you:

45 degree rotation increment on click w/out using variable