翻转卡片动画闪烁卡顿，仅鼠标居中时触发翻转问题求助

问题描述 #

翻转卡片在鼠标悬停时出现闪烁卡顿，只有鼠标放在卡片中心位置才能触发翻转效果。尝试添加z-index属性优化过渡流畅度，未起到作用。

相关代码 #

HTML代码 #

<div class="about-containers_2">
  <div class="the-maine-card-container">
    <div class="thecard">
      <div class="thefront">
        <h1>Computer Networks</h1>
        <div class="article-container">
          <img src="./assets/computer.png" alt="Project1" class="project-img" />
        </div>
      </div>
      <div class="theback">
        <h1 class="Sum">Summary</h1>
        <p class="para">The network was design using Cisco Packer<br/> Tracer for a single-story 100 x 50 meters building<br/> that provide wired and Wi-Fi internet access to approximately
          <br/> 40 employees, accommodating up to 160 untrustworthy Wi-Fi devices.
          <br/> Great simulation tool to learn more about Networks.
        </p>
        <div class="btn-container">
          <button class="btn-btn-color-2-projectbtn" onclick="location.href='https://github.com/'">Github</button>
        </div>
      </div>
    </div>
  </div>
</div>

CSS代码 #

.thecard {
  position: relative;
  transform-style: preserve-3d;
  transition: all 0.8s ease;
  border-radius: 2rem;
  padding: 1.5rem;
  text-align: center;
  margin: auto;
}

.thecard:hover {
  transform: rotateY(180deg);
  width: 300px;
  height: 200px;
}

.thefront {
  position: absolute;
  padding: 1.5rem;
  flex: 1;
  background: white;
  border-radius: 2rem;
  border: rgb(53, 53, 53) 0.1rem solid;
  border-color: rgb(163, 163, 163);
  text-align: center;
  backface-visibility: hidden;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  z-index: 1;
}

.theback {
  position: relative;
  padding: 1.5rem;
  flex: 1;
  background: rgb(7, 155, 155);
  border-radius: 2rem;
  border: rgb(53, 53, 53) 0.1rem solid;
  border-color: rgb(163, 163, 163);
  text-align: center;
  backface-visibility: hidden;
  overflow: hidden;
  transform: rotateY(180deg);
  text-align: justify;
  -webkit-backface-visibility: hidden;
  z-index: 2;
}

.the-maine-card-container {
  padding: 1.5rem;
  flex: 1;
  border-radius: 2rem;
  text-align: center;
  perspective: 1000px;
}

问题根源与修复方案 #

1. 悬停时尺寸突变导致触发区域丢失 #

.thecard:hover中同时修改width和height，翻转过程中卡片尺寸变化会让鼠标瞬间脱离触发范围，引发闪烁卡顿。

• 修复：给.thecard设置固定宽高，移除hover状态下的尺寸修改：

.thecard {
  position: relative;
  transform-style: preserve-3d;
  transition: all 0.8s ease;
  border-radius: 2rem;
  padding: 1.5rem;
  text-align: center;
  margin: auto;
  /* 添加固定宽高 */
  width: 300px;
  height: 200px;
}

.thecard:hover {
  transform: rotateY(180deg);
  /* 移除此处的width和height */
}

2. 背面卡片定位错误 #

.theback使用position: relative，会脱离3D变换上下文，无法和.thefront保持同一层级，导致鼠标触发区域判定异常。

• 修复：将.theback改为绝对定位，并铺满整个卡片容器：

.theback {
  position: absolute; /* 替换relative */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5rem;
  background: rgb(7, 155, 155);
  border-radius: 2rem;
  border: rgb(53, 53, 53) 0.1rem solid;
  border-color: rgb(163, 163, 163);
  text-align: center;
  backface-visibility: hidden;
  overflow: hidden;
  transform: rotateY(180deg);
  text-align: justify;
  -webkit-backface-visibility: hidden;
}

3. 正面卡片区域优化 #

给.thefront添加绝对定位铺满容器，避免触发区域出现空隙：

.thefront {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5rem;
  background: white;
  border-radius: 2rem;
  border: rgb(53, 53, 53) 0.1rem solid;
  border-color: rgb(163, 163, 163);
  text-align: center;
  backface-visibility: hidden;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
}

4. 性能优化（可选） #

给.thecard添加will-change属性，提示浏览器提前优化变换性能：

.thecard {
  will-change: transform;
}

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