Animar rotação CSS3 ao clicar com anterior e próximo
-
26-12-2019 - |
Pergunta
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 :)
Solução
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
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow