jquery旋转

jQuery旋转元素的方法

使用jQuery旋转元素可以通过CSS的transform属性实现。以下是几种常见的旋转方式：

旋转45度

$('#element').css('transform', 'rotate(45deg)');

动画旋转 使用jQuery的animate()方法配合CSS可以实现平滑的旋转动画：

$('#element').animate({
  deg: 360
}, {
  duration: 1000,
  step: function(now) {
    $(this).css('transform', 'rotate(' + now + 'deg)');
  }
});

持续旋转 创建无限旋转的动画效果：

function rotate() {
  $('#element').css({
    'transform': 'rotate(' + (new Date().getTime() / 20) + 'deg)'
  });
  requestAnimationFrame(rotate);
}
rotate();

使用transform-origin设置旋转中心点

默认旋转中心是元素中心，可以通过transform-origin改变：

$('#element').css({
  'transform-origin': 'left top',
  'transform': 'rotate(30deg)'
});

注意事项

• 旋转角度单位是deg（度），正值顺时针，负值逆时针
• 对于IE9及以下版本需要添加-ms-前缀
• 旋转可能会影响元素布局，必要时调整父元素尺寸
• 多个transform属性需合并书写，后写的会覆盖前面的

扩展：3D旋转

实现3D空间旋转效果：

$('#element').css('transform', 'rotateX(45deg) rotateY(30deg)');

以上方法可根据实际需求组合使用，实现各种旋转效果。