如何让HTML 3D卡片实现行列对齐排列？

嘿，我懂你遇到的麻烦——原代码里的卡片容器用了绝对定位且固定了水平居中位置，导致多个卡片挤在同一位置堆叠。咱们一步步调整，让它们规规矩矩排成行列，同时保留原本的3D翻转效果：

1. 调整HTML结构，添加外层布局容器 #

首先给所有卡片套一个外层容器来控制整体布局，注意ID不能重复使用，把原有的#make-3D-space、#product-card这类ID全部改成类名，避免多卡片冲突：

<!-- 外层布局容器 -->
<div class="cards-grid">
  <!-- 第一个3D卡片 -->
  <div class="make-3D-space">
    <div class="product-card">
      <div class="product-front">...</div>
      <div class="product-back">...</div>
      <!-- 卡片内部其他元素 -->
    </div>
  </div>
  
  <!-- 第二个3D卡片 -->
  <div class="make-3D-space">
    <div class="product-card">...</div>
  </div>
  
  <!-- 更多卡片... -->
</div>

2. 设置外层容器的布局样式 #

用CSS Grid实现自适应行列布局，适配性更强；也可以用Flex，按需选择：

Grid布局方案 #

.cards-grid {
  display: grid;
  /* 自动根据屏幕宽度生成列，每列最小340px */
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  /* 卡片之间的间距，可按需调整 */
  gap: 30px;
  padding: 20px;
  max-width: 1200px;
  /* 保持顶部间距，整体水平居中 */
  margin: 80px auto 0;
}

Flex布局方案 #

.cards-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  padding: 20px;
  max-width: 1200px;
  margin: 80px auto 0;
}

3. 修改单个卡片容器的CSS #

把原有的ID选择器全部替换成类选择器，同时删掉导致堆叠的绝对定位和固定位置：

/* 替换原#make-3D-space */
.make-3D-space {
  position: relative;
  perspective: 800px;
  width: 340px;
  height: 500px;
  transform-style: preserve-3d;
  transition: transform 5s;
  /* 移除原有的position: absolute、top、left、margin-left */
}

/* 替换原#product-card */
.product-card {
  width: 325px;
  height: 490px;
  position: absolute;
  top: 10px;
  left: 10px;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: 100ms ease-out;
}

/* 替换原#product-front、#product-back */
.product-front, .product-back {
  width: 335px;
  height: 500px;
  background: #fff;
  position: absolute;
  left: -5px;
  top: -5px;
  transition: all 100ms ease-out;
}

.product-back {
  display: none;
  transform: rotateY(180deg);
}

/* 替换原#product-card.animate相关选择器 */
.product-card.animate .product-back, 
.product-card.animate .product-front {
  top: 0;
  left: 0;
  transition: all 100ms ease-out;
}

按照这个逻辑，把你提供的CSS里所有ID选择器（比如#stats-container、#view-details）都改成类选择器，确保每个卡片的元素独立不冲突。

4. 调整JS交互（如果存在） #

如果原JS是通过ID获取元素的，要改成遍历类元素，给每个卡片绑定事件：

// 获取所有卡片
const cards = document.querySelectorAll('.product-card');

cards.forEach(card => {
  // 绑定鼠标进入事件，保留原3D翻转逻辑
  card.addEventListener('mouseenter', () => {
    card.classList.add('animate');
    // ...其他原有交互代码
  });
  
  // 绑定鼠标离开事件
  card.addEventListener('mouseleave', () => {
    card.classList.remove('animate');
    // ...其他原有交互代码
  });
});

这样修改后，外层容器会自动将卡片排列成整齐的行列，不会再堆叠，同时原有的3D翻转交互也能正常工作。

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