HTML如何实现3列2行闪卡布局且鼠标悬停时每张卡片独立翻转

问题核心原因 #

你的代码存在3个问题导致无法实现预期效果：

1. 外层容器.maincontainer设置了固定宽高+绝对居中，没有设置多列布局规则，250px的宽度只能放下1列卡片
2. 每张卡片.thecard设置了width:100%，会占满父容器整行，只能垂直排列
3. 2张卡片高度都设为100%，在高度仅320px的父容器里完全重叠，鼠标悬停时看起来是同时触发翻转

修复后完整代码 #

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale = 1">
  <title>CSS Card Flip</title>
  <style>
    body {
      background: #ffffff;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      padding: 40px 0;
      box-sizing: border-box;
    }
    /* 外层容器改为Grid布局实现3列 */
    .maincontainer {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      padding: 20px;
    }
    /* 卡片固定独立尺寸，避免继承父容器宽高 */
    .thecard {
      position: relative;
      width: 250px;
      height: 320px;
      border-radius: 10px;
      transform-style: preserve-3d;
      transition: all 0.8s ease;
    }
    /* 悬停翻转规则保留，仅作用于当前被hover的卡片 */
    .thecard:hover {
      transform: rotateY(180deg);
    }
    .thefront {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 10px;
      backface-visibility: hidden;
      overflow: hidden;
      background: #00843d;
      color: #000;
    }
    .theback {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 10px;
      backface-visibility: hidden;
      overflow: hidden;
      background: #ffd100;
      color: #333;
      text-align: center;
      transform: rotateY(180deg);
    }
    .thefront h1,
    .theback h1 {
      font-family: 'zilla slab', sans-serif;
      padding: 30px;
      font-weight: bold;
      font-size: 24px;
      text-align: center;
    }
    .thefront p,
    .theback p {
      font-family: 'zilla slab', sans-serif;
      padding: 30px;
      font-weight: normal;
      font-size: 12px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="maincontainer">
    <!-- 共6张卡片，3列2行排列 -->
    <div class="thecard">
      <div class="thefront">
        <h1>Front of Card 1</h1>
        <p>This is the front of the card. It contains important information. Please see overleaf for more details.</p>
      </div>
      <div class="theback">
        <h1>Back of Card 1</h1>
        <p>Your use of this site is subject to the terms and conditions governing this and all transactions.</p>
      </div>
    </div>
    <div class="thecard">
      <div class="thefront">
        <h1>Front of Card 2</h1>
        <p>This is the front of the card. It contains important information. Please see overleaf for more details.</p>
      </div>
      <div class="theback">
        <h1>Back of Card 2</h1>
        <p>Your use of this site is subject to the terms and conditions governing this and all transactions.</p>
      </div>
    </div>
    <div class="thecard">
      <div class="thefront">
        <h1>Front of Card 3</h1>
        <p>This is the front of the card. It contains important information. Please see overleaf for more details.</p>
      </div>
      <div class="theback">
        <h1>Back of Card 3</h1>
        <p>Your use of this site is subject to the terms and conditions governing this and all transactions.</p>
      </div>
    </div>
    <div class="thecard">
      <div class="thefront">
        <h1>Front of Card 4</h1>
        <p>This is the front of the card. It contains important information. Please see overleaf for more details.</p>
      </div>
      <div class="theback">
        <h1>Back of Card 4</h1>
        <p>Your use of this site is subject to the terms and conditions governing this and all transactions.</p>
      </div>
    </div>
    <div class="thecard">
      <div class="thefront">
        <h1>Front of Card 5</h1>
        <p>This is the front of the card. It contains important information. Please see overleaf for more details.</p>
      </div>
      <div class="theback">
        <h1>Back of Card 5</h1>
        <p>Your use of this site is subject to the terms and conditions governing this and all transactions.</p>
      </div>
    </div>
    <div class="thecard">
      <div class="thefront">
        <h1>Front of Card 6</h1>
        <p>This is the front of the card. It contains important information. Please see overleaf for more details.</p>
      </div>
      <div class="theback">
        <h1>Back of Card 6</h1>
        <p>Your use of this site is subject to the terms and conditions governing this and all transactions.</p>
      </div>
    </div>
  </div>
</body>
</html>

效果说明 #

修改后默认展示3列2行共6张卡片，每张卡片独立响应鼠标悬停事件，单独触发翻转动画，不会互相干扰。如果需要调整卡片间距，可以修改.maincontainer的gap属性值。

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