如何用CSS自定义属性结合JavaScript实现画廊图片独立旋转效果

在画廊类页面中，用户往往希望可以单独调整某一张图片的旋转角度，而不是所有图片同步旋转。通过CSS自定义属性（也就是CSS变量）配合JavaScript，我们可以很方便地实现这个需求，每张图片的旋转状态独立存储，互不影响。

核心实现思路

整个实现的核心逻辑分为三步：首先用CSS自定义属性为每张图片单独存储旋转角度，然后在CSS中读取这个属性应用到transform属性上，最后通过JavaScript监听旋转按钮的点击，动态修改对应图片的CSS自定义属性值。

1. 定义CSS自定义属性与基础样式

我们先给画廊容器和图片定义基础样式，同时为每张图片设置一个--rotate-angle的自定义属性，初始值为0度。

/* 画廊容器样式 */
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
}

/* 单张图片容器样式 */
.gallery-item {
  position: relative;
  width: 200px;
}

/* 图片样式，使用自定义属性控制旋转 */
.gallery-img {
  width: 100%;
  height: auto;
  /* 读取自定义属性作为旋转角度 */
  transform: rotate(var(--rotate-angle, 0deg));
  transition: transform 0.3s ease;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 旋转按钮样式 */
.rotate-btn {
  margin-top: 10px;
  padding: 6px 12px;
  background-color: #4a90e2;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
}

.rotate-btn:hover {
  background-color: #357abd;
}

2. 编写HTML结构

HTML部分需要为每张图片准备独立的容器，包含图片本身和对应的旋转按钮，方便后续绑定事件。

<div class="gallery">
  <div class="gallery-item">
    <img class="gallery-img" src="https://ipipp.com/photo1.jpg" alt="画廊图片1">
    <button class="rotate-btn">顺时针旋转90度</button>
  </div>
  <div class="gallery-item">
    <img class="gallery-img" src="https://ipipp.com/photo2.jpg" alt="画廊图片2">
    <button class="rotate-btn">顺时针旋转90度</button>
  </div>
  <div class="gallery-item">
    <img class="gallery-img" src="https://ipipp.com/photo3.jpg" alt="画廊图片3">
    <button class="rotate-btn">顺时针旋转90度</button>
  </div>
</div>

3. JavaScript实现动态修改旋转角度

接下来通过JavaScript给每个旋转按钮绑定点击事件，点击时找到对应的图片，修改其--rotate-angle自定义属性的值，实现独立旋转。

// 获取所有旋转按钮
const rotateBtns = document.querySelectorAll('.rotate-btn');

// 遍历按钮绑定点击事件
rotateBtns.forEach(btn => {
  btn.addEventListener('click', function() {
    // 找到当前按钮对应的图片容器
    const item = this.parentElement;
    // 找到容器内的图片元素
    const img = item.querySelector('.gallery-img');
    // 获取当前图片的旋转角度，如果没有则默认为0
    let currentAngle = parseInt(img.style.getPropertyValue('--rotate-angle') || 0);
    // 每次点击增加90度
    const newAngle = currentAngle + 90;
    // 设置新的旋转角度到图片的自定义属性上
    img.style.setProperty('--rotate-angle', newAngle + 'deg');
  });
});

效果扩展与注意事项

如果需要支持逆时针旋转，可以额外添加对应的按钮，修改角度计算逻辑为减90度即可。另外要注意，CSS自定义属性是区分大小写的，定义和使用的时候名称要保持一致。

如果页面中图片数量动态变化，只需要在新增图片元素后，重复绑定按钮的点击事件逻辑即可，不需要修改原有代码的核心逻辑，扩展性比较好。

常见问题解答

• 为什么旋转后图片会超出容器？ 可以给图片容器设置overflow: hidden，或者调整容器的尺寸适配旋转后的图片。
• 旋转角度可以保存吗？ 可以结合localStorage，在修改角度的时候把对应图片的角度存储起来，页面刷新后读取恢复即可。
• 支持任意角度旋转吗？ 可以修改按钮的逻辑，比如添加输入框让用户输入角度，直接设置对应的数值即可，不限制必须是90度的倍数。

CSS自定义属性JavaScript画廊图片旋转前端交互修改时间：2026-07-17 19:24:28