使用 prev 和 next 动画 CSS3 旋转 onclick答案

【问题标题】：Animate CSS3 rotation onclick with prev and next使用 prev 和 next 动画 CSS3 旋转 onclick
【发布时间】：2014-04-14 12:05:55
【问题描述】：

我有一个圆圈，当在 .next 类上触发 onclick 时，我需要转换 90 度，当点击 .prev 时，我需要转换 -90 度

我已经设法根据我自己也可以谷歌搜索的内容创建了以下代码！

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

        });

到目前为止，只需单击一下即可！但是如果你在 .next 上单击两次，我需要它旋转 180 度，当你在 .prev 上单击 4 次时，我需要它旋转 360 度。

但我似乎无法让它工作，这就是为什么我现在求助于您的专家:)

【问题讨论】：

标签： javascript jquery css rotation transform

【解决方案1】：

您需要增量轮换。

我认为这个话题对你有一些很好的提示：

45 degree rotation increment on click w/out using variable

【讨论】：

这似乎是正确的 :D 感谢您在我需要去的方向上发光！ :D 再次感谢！