自制图片旋转jquery代码

基础概念

图片旋转是指改变图像的方向或角度。在前端开发中，可以通过CSS或JavaScript来实现图片的旋转效果。jQuery是一个流行的JavaScript库，可以简化DOM操作和事件处理。

类型

CSS旋转：使用CSS的transform属性来实现旋转。
JavaScript旋转：使用JavaScript或jQuery来动态改变图片的旋转角度。

应用场景

用户交互：用户可以通过点击按钮来旋转图片。
动态展示：在某些动态展示场景中，图片需要按照一定的角度旋转。
游戏开发：在游戏开发中，图片旋转可以用于实现动画效果。

示例代码

以下是一个使用jQuery实现图片旋转的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片旋转</title>
    <style>
        #rotatedImage {
            transition: transform 0.5s ease-in-out;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <img id="rotatedImage" src="your-image.jpg" alt="旋转图片">
    <button id="rotateButton">旋转图片</button>

    <script>
        $(document).ready(function() {
            var angle = 0;
            $('#rotateButton').click(function() {
                angle += 90;
                $('#rotatedImage').css('transform', 'rotate(' + angle + 'deg)');
            });
        });
    </script>
</body>
</html>