jquery实现图片旋转效果

jQuery 实现图片旋转效果通常可以使用 `animate()` 方法配合 CSS 的 `transform` 属性来完成。CSS的 `rotate()` 函数允许你对元素进行旋转，而 jQuery 则提供了方便的方式来控制这个动画过程。下面是一个简单的示例：

$(document).ready(function(){
    // 获取需要旋转的图片元素
    var imgElement = $('#your-image-id');

    // 定义旋转的角度和时间
    var angle = 0; // 初始角度
    var duration = 500; // 动画持续时间 (毫秒)

    // 定义旋转函数，每次增加一定角度并设置过渡效果
    function rotateImage() {
        angle += 45; // 每次旋转45度
        imgElement.css({
            '-webkit-transform': 'rotate(' + angle + 'deg)', // Webkit内核（如Safari）
            '-moz-transform': 'rotate(' + angle + 'deg)',   // Firefox内核
            '-ms-transform': 'rotate(' + angle + 'deg)',   // IE9及更低版本
            '-o-transform': 'rotate(' + angle + 'deg)',   // Opera内核
            transform: 'rotate(' + angle + 'deg)'          // 标准语法
        });
        
        // 如果旋转的角度小于360度，继续动画；否则停止
        if (angle < 360) {
            imgElement.animate({rotation: angle}, duration, function() { // 使用animate方法执行旋转
                setTimeout(rotateImage, duration); // 递归调用自身，创建循环旋转效果
            });
        }
    }

    // 开始旋转
    rotateImage();
});