jquery旋转动画

jQuery 旋转动画实现方法

使用 jQuery 实现旋转动画可以通过 CSS transform 属性结合 jQuery 的动画方法完成。以下是几种常见方式：

方法一：使用 animate() 和 CSS transform

$("#element").animate(
  { deg: 360 }, // 旋转角度
  {
    duration: 1000, // 动画时长（毫秒）
    step: function(now) {
      $(this).css({ 
        transform: "rotate(" + now + "deg)" 
      });
    }
  }
);

方法二：直接修改 CSS 类

// CSS 定义
.rotate {
  transition: transform 1s ease;
  transform: rotate(360deg);
}

// jQuery 添加类
$("#element").addClass("rotate");

方法三：使用 jQuery UI 扩展

需引入 jQuery UI 库：

$("#element").animate({
  rotate: "+=360deg" // 顺时针旋转360度
}, 1000);

方法四：使用 setInterval 逐帧旋转

let angle = 0;
const rotation = setInterval(() => {
  angle += 5;
  $("#element").css("transform", "rotate(" + angle + "deg)");
  if (angle >= 360) clearInterval(rotation);
}, 50);

注意事项

1. 旋转中心点可通过 CSS 调整：

   #element {
     transform-origin: 50% 50%; /* 默认中心点 */
   }

2. 如需无限旋转，可结合 animation-iteration-count: infinite 的 CSS 动画
3. 考虑浏览器兼容性时需添加前缀：

   $(this).css({
     '-webkit-transform': 'rotate(' + now + 'deg)',
     '-ms-transform': 'rotate(' + now + 'deg)',
     'transform': 'rotate(' + now + 'deg)'
   });

示例：点击按钮触发旋转

$("#rotate-btn").click(function() {
  $("#target").css("transform", "rotate(360deg)");
});