当前位置：首页 > 行业动态 > 正文

html点击图片旋转

admin
行业动态
2025-04-30
4

通过HTML结合CSS3的transform属性和JavaScript事件监听，实现点击图片时应用rotate()变换，配合transition实现平滑旋转动画效果

实现思路

通过HTML展示图片,CSS控制旋转样式，JavaScript监听点击事件并动态修改旋转角度，核心是利用transform: rotate()属性和element.style操作。

实现步骤

步骤	代码与说明
HTML结构	“`html

“`
使用`id`标记图片，方便JS操作 |
| 2. CSS样式 | “`css
#rotateImg {
transition: transform 0.5s; / 添加过渡动画 /
transform: rotate(0deg); / 初始旋转角度 /
cursor: pointer; / 鼠标悬停时显示指针 /
}
“`
`transition`使旋转更流畅，`cursor`提升交互感 |
| 3. JavaScript逻辑 | “`javascript
const img = document.getElementById(‘rotateImg’);
let angle = 0; // 初始角度

img.addEventListener(‘click’, () => {
angle += 90; // 每次点击增加90度
if (angle >= 360) angle = 0; // 超过360度归零
img.style.transform = rotate(${angle}deg); // 更新样式
});

 变量`angle`记录当前角度，点击时累加并取余 |
---
 完整代码示例
```html
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">图片旋转示例</title>
  <style>
    #rotateImg {
      width: 300px;
      transition: transform 0.5s;
      transform: rotate(0deg);
      cursor: pointer;
    }
  </style>
</head>
<body>
  <img id="rotateImg" src="image.jpg" alt="点击旋转图片">
  <script>
    const img = document.getElementById('rotateImg');
    let angle = 0;
    img.addEventListener('click', () => {
      angle = (angle + 90) % 360; // 每次+90度，取余防溢出
      img.style.transform = `rotate(${angle}deg)`;
    });
  </script>
</body>
</html>