preserve-3d 和 flat 对嵌套 3D 变换的效果有什么区别？

翻牌效果必须靠 preserve-3d

翻牌是最常见的 3D 效果。一张卡片有正面和背面两个子元素，鼠标悬停时绕 Y 轴旋转 180 度。如果父元素没有设 preserve-3d，正反两面会被压平到同一个平面上，旋转时看不到「翻转」的立体感。

.card {
  position: relative;
  width: 200px;
  height: 280px;
  perspective: 800px; /* 给子元素提供透视 */
}

.card-inner {
  transform-style: preserve-3d; /* 让正反面共享 3D 空间 */
  transition: transform 0.6s;
  position: relative;
  width: 100%;
  height: 100%;
}

.card:hover .card-inner {
  transform: rotateY(180deg); /* 悬停时翻转 */
}

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* 背面不可见 */
}

.card-back {
  transform: rotateY(180deg); /* 初始就翻过去 */
}

哪些属性会让 preserve-3d 失效

preserve-3d 有一个容易踩的坑。某些属性会强制浏览器把元素「压平」，即使你写了 preserve-3d 也不起作用。

overflow 设成 hidden、scroll 或 auto 时，浏览器需要裁剪内容，没法保留 3D 空间，会回退到 flat。这个问题在做翻牌效果时经常碰到：给卡片容器加了 overflow: hidden 想裁掉溢出内容，结果 3D 效果没了。

opacity 小于 1 也会触发压平。浏览器在合成透明图层时需要先把内容渲染成一张 2D 位图，3D 信息就丢失了。filter（值不是 none）、clip-path、mask 也是同样的原因。

碰到 preserve-3d 不生效，先检查这个元素和它的祖先有没有设这些属性。

preserve-3d 不会自动继承

假如有三层嵌套：爷爷设了 preserve-3d，父亲没设，孙子做 3D 变换。孙子的 3D 变换不会出现在爷爷的 3D 空间里，因为 preserve-3d 不继承。3D 空间在父亲那一层就断了。

要让孙子也参与 3D 空间，每一层中间元素都要设 preserve-3d。这在做立方体或多层嵌套的 3D 布局时尤其要注意。

容易答错的地方

以为 preserve-3d 等于 perspective

perspective 定义观察者的距离，产生近大远小的效果。preserve-3d 决定子元素是否在 3D 空间里。两个属性经常一起用，但作用完全不同。只设 perspective 不设 preserve-3d，子元素的 3D 变换还是会被压平。

以为设了 preserve-3d 就一定有效

overflow: hidden、opacity 小于 1、filter 都会让 preserve-3d 回退到 flat。写了 preserve-3d 不等于生效了，要用 DevTools 检查实际渲染。

面试官还会怎么问？

把知识连起来