做 3D 卡片翻转效果时，backface-visibility 解决的是什么问题？

完整的卡片翻转结构

卡片翻转至少需要三层：外层容器、正面、反面。外层容器负责提供 3D 空间和翻转动作，正面和反面重叠在一起，各管各的显示与隐藏。

<!-- 结构：容器 > 正面 + 反面 -->
<div class="card">
  <div class="card-front">正面内容</div>
  <div class="card-back">反面内容</div>
</div>

<style>
.card {
  width: 300px; height: 200px;
  perspective: 800px;                  /* 给子元素提供透视感 */
}
.card-front, .card-back {
  position: absolute; width: 100%; height: 100%;
  backface-visibility: hidden;         /* 两面都要加 */
  transition: transform 0.6s;
}
.card-back {
  transform: rotateY(180deg);          /* 反面初始就翻过去 */
}
.card:hover .card-front { transform: rotateY(180deg); }
.card:hover .card-back  { transform: rotateY(0deg);   }
</style>

transform-style: preserve-3d 的作用

上面的例子里还漏了一个关键属性。如果不在正面和反面的共同父元素上设 transform-style: preserve-3d，子元素会被压平回 2D 平面，翻转时就看不到 3D 效果。

这个属性的意思是「保留子元素在 3D 空间中的位置」。默认值 flat 会把子元素的 3D 变换投影到父元素的平面上，看起来就像照片而不是立体的。实际写代码时经常会发现翻转没效果，大概率就是漏了这个属性。

还有一个注意点：overflow: hidden 会破坏 preserve-3d。如果父容器设了 overflow: hidden，子元素的 3D 效果会被压平。这个坑在做卡片翻转时特别容易踩到。

容易答错的地方

只给一面加 backface-visibility: hidden

正面和反面都要加。如果只给反面加，翻转后正面转到背后时还是可见的，两面内容会叠在一起。

把 perspective 写在被翻转的元素自身上

perspective 要写在翻转元素的父容器上，或者用 transform: perspective(800px) rotateY(180deg) 写在变换函数里。但如果直接写 perspective: 800px 在被翻转的元素上，它只影响该元素的子元素，对元素自身的翻转没有效果。

忘了翻转时的层叠顺序

翻转过程中，正面和反面可能会在 z-index 上打架。正面翻到一半时两者在同一个平面上，可能出现闪烁。给反面加一个较低的 z-index，或者确保翻转角度正好是 180 度的倍数，可以避免这个问题。

面试官还会怎么问？

把知识连起来