可通过CSS transform:rotate()、transform-origin、JavaScript动态控制、range滑块调节及CSS动画五种方式实现图片旋转。其中CSS适用于静态或平滑旋转，JS支持交互式实时调整，动画适合持续匀速旋转场景。
如果您希望在网页中实现图片的旋转效果，HTML5本身不直接提供旋转功能，但可以通过CSS的transform属性或JavaScript动态控制图片的旋转角度。以下是几种具体实现方式：
一、使用CSS transform:rotate()静态旋转图片
该方法适用于固定角度的旋转，无需交互，仅通过样式定义即可完成。CSS transform:rotate()以元素中心为原点，按指定角度顺时针旋转。
1、在HTML中插入img标签，并为其添加class名，例如
。
2、在CSS中定义.rotated-img类，设置transform: rotate()值，如transform: rotate(45deg)。
立即学习“前端免费学习笔记（深入）”；
3、可选地添加transition属性实现平滑过渡效果，例如transition: transform 0.3s ease-in-out。
二、使用CSS自定义旋转中心点（transform-origin）
默认情况下，transform以元素中心为旋转原点，但可通过transform-origin调整旋转基准点，实现绕左上角、底部等位置旋转。
1、为图片设置transform-origin属性，例如transform-origin: top left表示以左上角为原点。
2、配合transform: rotate()使用，如transform: rotate(90deg)将使图片绕左上角顺时针转90度。
3、支持像素值、百分比或关键字（left/center/right/top/bottom），例如transform-origin: 20px 30px。
三、通过JavaScript动态修改rotate角度
该方法允许用户触发事件（如点击、拖拽、输入数值）后实时更新图片旋转角度，适合交互式场景。
1、为img元素设置id，例如
。
2、在JavaScript中获取该元素，如const img = document.getElementById("rotateImage")。
3、通过修改style.transform属性设置旋转值，例如img.style.transform = "rotate(75deg)"。
4、可绑定按钮点击事件，每次点击增加15度：img.style.transform = `rotate(${currentAngle += 15}deg)`。
四、使用JavaScript结合input range控件实时拖动调节角度
该方式提供可视化角度调节界面，用户通过滑块拖动即时预览旋转效果，提升操作直观性。
1、在HTML中添加和对应图片。
2、监听input事件，获取当前滑块值：document.getElementById("angleSlider").addEventListener("input", function() {...})。
3、读取this.value作为角度值，并赋给图片的transform样式，如img.style.transform = `rotate(${this.value}deg)`。
4、注意：需确保图片初始无内联transform样式，或统一由JS控制，避免样式冲突。
五、利用CSS动画实现连续自动旋转
当需要图片持续匀速旋转（如加载指示器），可借助@keyframes定义动画序列，并绑定至图片元素。
1、在CSS中定义@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }。
2、为图片应用animation属性，例如animation: spin 2s linear infinite。
3、可调整animation-duration控制转速，animation-timing-function改变运动节奏，animation-iteration-count设定循环次数。
