基于Bootstrap，如何实现图片点击旋转展开显示背面网格画廊？

1. 调整HTML结构 #

原结构无法实现正反面切换，需要将每张主图包装成翻转卡片容器，包含正面（主图）和背面（网格画廊）两个部分，结合Bootstrap栅格做响应式布局：

<div class="container-fluid text-center py-4">
  <div class="row g-4">
    <!-- 第一张翻转卡片 -->
    <div class="col-12 col-sm-4 col-md-6">
      <div class="flip-card">
        <div class="flip-card-inner">
          <!-- 正面：主图片 -->
          <div class="flip-card-front">
            <img src="/vw-front-painted.jpg" class="img-fluid rounded" alt="VW Front">
          </div>
          <!-- 背面：网格画廊 -->
          <div class="flip-card-back">
            <div class="row g-2">
              <div class="col-4">
                <img src="/vw-sub1.jpg" class="img-fluid rounded" alt="VW Sub 1">
              </div>
              <div class="col-4">
                <img src="/vw-sub2.jpg" class="img-fluid rounded" alt="VW Sub 2">
              </div>
              <div class="col-4">
                <img src="/vw-sub3.jpg" class="img-fluid rounded" alt="VW Sub 3">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 第二张翻转卡片 -->
    <div class="col-12 col-sm-4 col-md-6">
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="/bmw-side-paint-out.jpg" class="img-fluid rounded" alt="BMW Side">
          </div>
          <div class="flip-card-back">
            <div class="row g-2">
              <div class="col-4">
                <img src="/bmw-sub1.jpg" class="img-fluid rounded" alt="BMW Sub 1">
              </div>
              <div class="col-4">
                <img src="/bmw-sub2.jpg" class="img-fluid rounded" alt="BMW Sub 2">
              </div>
              <div class="col-4">
                <img src="/bmw-sub3.jpg" class="img-fluid rounded" alt="BMW Sub 3">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 剩余图片按上述结构重复添加 -->
  </div>
</div>

2. 编写CSS实现3D翻转效果 #

利用CSS 3D变换属性实现正反面切换，同时适配Bootstrap样式：

/* 翻转容器：控制整体尺寸与3D视角 */
.flip-card {
  perspective: 1000px;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

/* 内部容器：负责触发旋转动画 */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
}

/* 点击后触发的旋转类 */
.flip-card-inner.flipped {
  transform: rotateY(180deg);
}

/* 正反面通用样式 */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 0.375rem;
  overflow: hidden;
}

/* 正面图片样式 */
.flip-card-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 背面样式：默认旋转180度隐藏，用Bootstrap栅格做网格 */
.flip-card-back {
  transform: rotateY(180deg);
  background-color: #f8f9fa;
  padding: 0.5rem;
}

.flip-card-back img {
  height: 60px;
  object-fit: cover;
}

3. JavaScript添加点击交互 #

给每个翻转容器绑定点击事件，切换旋转状态：

// 获取所有翻转容器内部元素
const flipCardInners = document.querySelectorAll('.flip-card-inner');

flipCardInners.forEach(inner => {
  inner.addEventListener('click', () => {
    // 切换flipped类触发旋转
    inner.classList.toggle('flipped');
  });
});

核心原理说明 #

• perspective：创建3D空间视角，让旋转效果更真实
• transform-style: preserve-3d：保证子元素继承3D变换属性
• backface-visibility: hidden：让元素背面不可见，实现正反面切换的视觉效果
• 点击事件通过切换flipped类触发rotateY(180deg)的平滑过渡动画

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