上一篇
html绘制旋转图片
使用CSS transform属性实现：将图片标签包裹div并添加style=”transform: rotate(角度值deg);”，如，通过修改角度值可控制旋转方向与度数。（75字）
使用CSS实现图片旋转
| 步骤 | 说明 | 代码示例 |
|---|---|---|
| HTML结构 | 在页面中插入图片标签 | <img src="image.jpg" id="rotate-img" alt="旋转图片"> |
| CSS样式 | 通过transform属性设置旋转角度 | css<br>img#rotate-img {<br> transform: rotate(45deg); / 旋转45度 /<br>} |
| 动态旋转 | 使用CSS动画实现持续旋转 | css<br>@keyframes spin {<br> from { transform: rotate(0deg); )<br> to { transform: rotate(360deg); )<br>}<br>img#rotate-img {<br> animation: spin 5s linear infinite; / 5秒转一圈，无限循环 /<br>} |
使用JavaScript控制图片旋转
| 功能 | 实现方式 | 代码示例 |
|---|---|---|
| 基础旋转 | 通过style.transform修改旋转角度 | js<br>const img = document.getElementById('rotate-img');<br>img.style.transform = 'rotate(90deg)'; |
| 定时旋转 | 使用setInterval逐帧改变角度 | js<br>let angle = 0;<br>setInterval(() => {<br> angle += 1;<br> img.style.transform = `rotate(${angle}deg)`;<br>}, 100); / 每100ms增加1度 / |
| 按钮控制旋转 | 绑定事件触发旋转逻辑 | html<br><button onclick="rotateImage()">旋转</button><br><script>function rotateImage() {<br> img.style.transform = 'rotate(180deg)';<br>}<br></script> |
相关问题与解答
问题1：如何让图片顺时针旋转？
解答：在CSS或JavaScript中，正角度值（如rotate(90deg)）表示顺时针旋转，负角度值（如rotate(-90deg)）表示逆时针旋转，修改数值即可控制方向。
问题2：如何让图片旋转后保持鼠标悬停暂停？
解答：可通过JavaScript监听mouseover和mouseout事件，暂停或恢复定时器。
let intervalId;
function startRotation() {
intervalId = setInterval(() => { / 旋转逻辑 / }, 100);
}
function stopRotation() {
clearInterval(intervalId);
}
img.addEventListener('mouseover', stopRotation);
img.addEventListener('mouseout', startRotation);
