Prev와 Next를 사용하여 CSS3 회전 애니메이션을 OnClick합니다

Question

onclick이 .next 클래스에서 onClick을 해고 할 때 90 °를 변환 해야하는 원이 있습니다 .prev

나는 Google도 내 자신을 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');

        });

.

그리고 지금까지 한 번의 클릭으로 작동합니다!그러나 .prev에서 4 번을 클릭하면 .Next에서 두 번 클릭하고 360을 클릭하면 180 회전이 필요합니다.

그러나 나는 그것을 일하는 것처럼 보일 수 없다. 그래서 나는 당신에게 전문가로 돌아 오는 이유이다 :)

Answer 1

점진적 회전이 필요합니다.

이 주제에 당신에게 좋은 팁이 있다고 생각합니다 :

45도 회전 증가 / out변수를 사용하여