使用CSS和HTML实现名片正反面翻转效果遇问题求助

正反面无法重叠、翻转失效的核心问题出在定位规则和3D空间设置上，以下是具体排查点和修复方案：

关键问题点 #

• 未给父容器.business-card设置相对定位：绝对定位的子元素需要以相对定位的父元素为基准，否则会相对于页面根元素定位，导致错位。
• 正反面元素未设置绝对定位：.front和.back默认是块级元素，会垂直流式排列，必须用绝对定位让它们重叠在同一位置。
• 缺失3D空间上下文：父容器需要开启transform-style: preserve-3d，才能让子元素的3D翻转效果生效。
• 正反面尺寸未统一：如果宽高不一致，即使定位正确也会出现部分偏移或显示不全。

修复后的完整代码示例 #

HTML（你已确认无误，这里仅作参考） #

<div class="business-card">
  <div class="front">正面内容</div>
  <div class="back">背面内容</div>
</div>

CSS #

/* 父容器核心设置 */
.business-card {
  position: relative; /* 作为子元素绝对定位的基准 */
  width: 300px; /* 名片宽度 */
  height: 180px; /* 名片高度 */
  transform-style: preserve-3d; /* 开启3D空间 */
  transition: transform 0.6s ease; /* 翻转过渡动画 */
  cursor: pointer;
}

/* 正反面通用样式 */
.business-card .front,
.business-card .back {
  position: absolute; /* 让两个元素重叠 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* 隐藏背面元素的默认显示 */
  border-radius: 8px;
  padding: 20px;
  box-sizing: border-box;
}

/* 正面样式 */
.business-card .front {
  background-color: #fff;
  color: #333;
}

/* 背面初始状态（翻转180度） */
.business-card .back {
  background-color: #333;
  color: #fff;
  transform: rotateY(180deg);
}

/* 鼠标hover时触发翻转 */
.business-card:hover {
  transform: rotateY(180deg);
}

验证步骤 #

1. 检查.business-card是否包含position: relative、明确的宽高和transform-style: preserve-3d。
2. 确认.front和.back的定位为absolute，且宽高设为100%，同时设置了top: 0和left: 0。
3. 确保.back初始状态有transform: rotateY(180deg)，父容器hover时的transform能触发翻转。
4. 检查backface-visibility: hidden是否正确添加，避免翻转时同时显示正反面。

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