jquery 旋转

jQuery 旋转元素的方法

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

使用 .css() 方法直接设置旋转

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

通过添加/移除类名控制旋转

定义 CSS 类：

.rotate-45 {
    transform: rotate(45deg);
    transition: transform 0.3s ease; /* 可选：添加动画效果 */
}

jQuery 代码：

$('#element').addClass('rotate-45');

动态旋转（根据变量值）

let angle = 30;
$('#element').css('transform', `rotate(${angle}deg)`);

连续旋转动画

let currentRotation = 0;
setInterval(function() {
    currentRotation += 5;
    $('#element').css('transform', `rotate(${currentRotation}deg)`);
}, 100);

注意事项

• 旋转中心默认是元素中心，可通过 transform-origin 修改
• 考虑添加 transition 属性实现平滑动画效果
• 对于复杂动画，建议使用 CSS3 动画或专门的动画库

浏览器兼容性

现代浏览器都支持 CSS 旋转，对于老旧 IE 浏览器(IE9以下)需要添加厂商前缀：

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