jquery 旋转

jQuery 旋转元素的方法

使用jQuery旋转元素可以通过CSS的transform属性实现，结合rotate()函数完成旋转效果。以下是几种常见的实现方式：

基础旋转语法 通过修改CSS的transform属性实现静态旋转：

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

动画旋转 结合jQuery的animate()方法实现平滑旋转动画（需引入jQuery UI扩展）：

$('#element').animate({ 
  rotate: '+=45deg' 
}, 1000);

自定义旋转函数 创建可重复调用的旋转函数，支持角度参数：

function rotateElement(selector, degrees) {
  $(selector).css({
    'transform': 'rotate(' + degrees + 'deg)',
    'transform-origin': 'center center'
  });
}
// 调用示例
rotateElement('#box', 90);

事件触发旋转 通过事件（如点击）触发旋转效果：

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

注意事项

• 旋转默认以元素中心为原点，可通过transform-origin修改基准点
• 连续旋转需使用+=语法累积角度值
• 考虑添加CSS过渡效果提升视觉体验：

  .transition {
  transition: transform 0.5s ease;
  }

浏览器兼容方案

对于旧版浏览器需添加厂商前缀：

$('#element').css({
  '-webkit-transform': 'rotate(30deg)',
  '-ms-transform': 'rotate(30deg)',
  'transform': 'rotate(30deg)'
});

以上方法可根据实际需求选择静态旋转或动态动画效果，建议优先使用CSS3原生变换以获得最佳性能。