<!-- 引入jQuery库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- 引入jQueryRotate插件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQueryRotate/2.3.3/jQueryRotate.min.js"></script>

<img id="rotate-image" src="your-image.jpg" alt="Rotatable Image">
<button id="rotate-btn">旋转90度</button>
<button id="reset-btn">重置</button>

$(document).ready(function() {
    // 初始化旋转角度
    let currentAngle = 0;
    
    // 点击旋转按钮
    $('#rotate-btn').click(function() {
        currentAngle += 90;
        $('#rotate-image').rotate({
            angle: currentAngle,
            animateTo: currentAngle,
            duration: 500
        });
    });
    
    // 点击重置按钮
    $('#reset-btn').click(function() {
        currentAngle = 0;
        $('#rotate-image').rotate({
            angle: 0,
            animateTo: 0,
            duration: 500
        });
    });
});

$('#rotate-image').rotatable({
    handle: $('#rotate-handle'), // 可选的旋转手柄元素
    angle: 0, // 初始角度
    snap: 15, // 每15度吸附一次
    rotate: function(event, ui) {
        console.log('当前角度: ' + ui.angle);
    }
});

// 无限旋转动画
$('#rotate-image').rotate({
    angle: 0,
    animateTo: 360,
    duration: 3000,
    callback: function() {
        $(this).rotate({ angle: 0, animateTo: 360, duration: 3000 });
    }
});