Animer CSS3 Rotation OnCliquez avec Prev et Suivant

Question

J'ai un cercle que j'ai besoin de transformer 90 dégresses quand un onclick est tiré sur une classe .Next et -90 dégressé lorsque vous avez cliqué sur .PRev

J'ai réussi à créer le code suivant en fonction de ce que je pouvais aussi Google moi-même!

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

        });

Et jusqu'à présent, cela fonctionne avec un seul clic!Mais j'en ai besoin pour faire pivoter 180 si vous cliquez deux fois sur .Next et comme 360 lorsque vous cliquez 4 fois sur .PRev.

Mais je n'arrive pas à le faire fonctionner, c'est pourquoi je suis maintenant en train de vous tourner vers vos experts :)

Answer 1

Vous avez besoin d'une rotation progressive.

Je pense que ce sujet a de bons conseils pour vous:

Incrément de rotation de 45 degrés sur clic avec outUtilisation de la variable