jquery 旋转

jQuery 旋转元素的方法

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

基本旋转语法

通过修改 CSS 的 transform 属性来旋转元素：

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

这会将 ID 为 element 的元素旋转 45 度。

动态旋转

结合 jQuery 的事件或动画功能实现动态旋转：

$('#element').click(function() {
    $(this).css('transform', 'rotate(90deg)');
});

点击元素时旋转 90 度。

动画旋转

使用 jQuery 的 animate 方法配合 CSS 过渡效果实现平滑旋转：

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

元素在 1 秒内顺时针旋转 45 度。

使用 jQuery UI 扩展

如果需要更复杂的旋转动画，可以引入 jQuery UI 的 rotate 方法：

$('#element').rotate({
    angle: 0,
    animateTo: 360,
    duration: 2000
});

元素在 2 秒内从 0 度旋转到 360 度。

注意事项

• 确保元素具有 display: block 或 display: inline-block 样式，否则旋转可能无效。
• 旋转中心默认是元素的中心点，可以通过 transform-origin 调整。
• 对于复杂动画，建议使用 CSS3 动画或专门的动画库（如 GSAP）以获得更好的性能。