嘿，我帮你搞定这个问题！首先咱们来拆解一下你遇到的两个核心问题：卡片重叠、调整间距后旋转轴异常，这其实都是布局和3D变换上下文的小问题，很容易修复。

问题根源分析 #

• 卡片重叠：你给.flip-cards加了float: left但没设置间距，所有卡片挤在一起自然会重叠；另外父容器.flip-container没有处理浮动，导致它的高度塌陷，也会影响后续布局。
• 旋转轴异常：当你手动调整间距时，可能破坏了3D变换的上下文——.flip-cards作为3D容器，里面的绝对定位卡片依赖它的position: relative来定位，一旦间距调整方式不对，就会让旋转的基准轴跑偏。

修复后的完整代码 #

CSS 部分 #

/* 父容器：处理浮动，确保包裹所有卡片，同时设置统一的透视效果 */
.flip-container {
  position: relative;
  perspective: 1000px; /* 补充单位，样式更规范 */
  padding: 5px;
  overflow: hidden; /* 清除浮动，让容器包裹所有浮动的卡片 */
}

/* 卡片容器：添加间距，保持3D变换上下文 */
.flip-cards {
  width: 200px;
  height: 260px;
  position: relative;
  float: left;
  margin: 0 15px 15px 0; /* 关键：添加左右和底部间距，避免重叠 */
  transition: all 1s ease;
  transform-style: preserve-3d;
}

/* 鼠标悬停翻转效果（如果要X轴旋转，把rotateY改成rotateX即可） */
.flip-cards:hover {
  transform: rotateY(180deg);
}

/* 正反卡片的基础样式 */
.flip-cards div {
  width: 200px;
  height: 260px;
  position: absolute;
  backface-visibility: hidden;
}

.front-card {
  z-index: 2; /* 确保正面卡片默认显示在最上层，解决层级问题 */
}

.reverse-card {
  font-family: "Georgia";
  transform: rotateY(180deg);
  background-color: black;
  color: white; /* 添加文字颜色，避免黑色背景下看不到内容 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.reverse-card p,
.reverse-card h2 {
  background-color: #e5e5e5;
  color: #333;
  padding: 8px;
  width: 100%;
  text-align: center;
  margin: 5px 0;
}

/* 卡片背景图统一设置 */
#card1, #card2, #card3, #card4 {
  background-image: url(http://placehold.it/200x260);
  background-size: cover; /* 确保图片铺满卡片容器 */
}

HTML 部分 #

<div class="flip-container">
  <div class="flip-cards">
    <div class="front-card" id="card1"></div>
    <div class="reverse-card">
      <p>Text</p>
    </div>
  </div>
  <div class="flip-cards">
    <div class="front-card" id="card2"></div>
    <div class="reverse-card">
      <h2>About</h2>
      <p>Text</p>
    </div>
  </div>
  <div class="flip-cards">
    <div class="front-card" id="card3"></div>
    <div class="reverse-card">
      <p>Text</p>
    </div>
  </div>
  <div class="flip-cards">
    <div class="front-card" id="card4"></div>
    <div class="reverse-card">
      <p>Text</p>
    </div>
  </div>
</div>

关键修复点说明 #

1. 添加卡片间距：给.flip-cards加上margin: 0 15px 15px 0，让每张卡片之间有足够的空隙，彻底解决重叠问题。
2. 处理父容器浮动：给.flip-container加上overflow: hidden，确保它能包裹住所有浮动的卡片，避免布局塌陷影响后续元素。
3. 优化3D变换上下文：保留.flip-cards的position: relative，让里面的绝对定位正反卡片始终以它为基准定位，旋转轴不会跑偏。
4. 调整层级与可读性：给.front-card设置z-index: 2确保正面默认显示；给反面卡片添加文字颜色和弹性布局，让内容更清晰。
5. X轴旋转切换：如果你确实需要沿X轴翻转（上下翻），只需要把所有rotateY(180deg)改成rotateX(180deg)即可，旋转轴会自动以卡片中心为基准，不会出现异常。

这样调整后，所有卡片都会均匀分布，鼠标悬停时的翻转效果也完全正常啦！

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