如何实现点击按钮仅旋转单张图片（无需批量创建ID）

你的问题核心在于两点：一是HTML中重复使用id="theImage"违反了ID唯一性规范，二是全局CSS变量--turn会同时影响所有引用它的元素。以下是无需为每张图片单独设置ID的解决方案：

1. 调整HTML结构 #

移除重复的ID，给所有可旋转图片添加统一类名，并在按钮点击时传递当前按钮元素：

<div class="card shadow-sm">
  <img alt="text of my image 1" class="rotatable-img img-thumbnail card-img-top" property="contentUrl" src="myimage1.png" /><br/>
  <div class="btn-group">
    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="rotate90(this)">Rotar</button>
  </div>
</div>
<div class="card shadow-sm">
  <img alt="text of my image 2" class="rotatable-img img-thumbnail card-img-top" property="contentUrl" src="myimage2.png" /><br/>
  <div class="btn-group">
    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="rotate90(this)">Rotar</button>
  </div>
</div>

2. 简化CSS样式 #

去掉全局变量，给可旋转图片添加基础样式，可选添加过渡动画让旋转更平滑：

img {
  width: auto;
  height: auto;
  image-rendering: pixelated;
}

.rotatable-img {
  /* 可选：添加过渡动画，让旋转更流畅 */
  transition: transform 0.3s ease;
}

3. 重写旋转函数 #

通过按钮元素定位到对应卡片内的图片，单独维护每张图片的旋转状态：

function rotate90(btn) {
  // 找到按钮所在卡片里的目标图片
  const img = btn.closest('.card').querySelector('.rotatable-img');
  // 获取当前旋转角度（默认0）
  const currentTransform = getComputedStyle(img).transform;
  const currentRotation = currentTransform !== 'none' ? parseInt(currentTransform.split(',')[4]) : 0;
  // 计算新角度，取模360保证循环
  const newRotation = (currentRotation + 90) % 360;
  // 给图片设置新的旋转角度
  img.style.transform = `rotate(${newRotation}deg)`;
}

原理说明 #

• 通过btn.closest('.card')快速定位到按钮所在的卡片容器，再用querySelector('.rotatable-img')找到对应图片，无需依赖唯一ID
• 每张图片的旋转状态单独存在于自身的style.transform中，修改时只会影响当前图片，不会干扰其他图片
• 这套方案完全适配批量生成的画廊，不管有多少张图片都能正常工作

内容的提问来源于stack exchange，提问作者Kaxsp