为什么 transform-style: preserve-3d 加了却没效果？
根本原因通常是父容器没设 transform-style: preserve-3d，或者更常见的是——子元素被「扁平化」了：父容器本身有 transform、filter、opacity 等触发层叠上下文（stacking context）的属性，导致浏览器强制关闭 3D 上下文。
- 必须在直接包裹翻转子元素的父容器上设置
transform-style: preserve-3d，不是最外层容器，也不是子元素自己 -
perspective要加在父容器上（不是transform的一部分），值太小（如100px）会畸变，太大（如5000px）几乎看不出翻转感，建议800px–1200px起手 - 避免给该父容器加
filter或opacity: 0.99——哪怕只是调试用，也会悄悄关掉preserve-3d
翻转盒子尺寸不一致导致错位怎么办？
3D 翻转时，如果正面和背面的 width/height 不完全一致（比如一个用了 border，另一个没用；或一个含 padding，另一个用 box-sizing: border-box 但没统一），旋转后视觉上会偏移、悬空、甚至“穿模”。
- 两个面必须使用完全相同的盒模型尺寸：统一设
box-sizing: border-box，显式声明width、height、border、padding - 推荐把两个面都包进同一个父容器，用
position: absolute叠在一起，再通过backface-visibility: hidden隐藏反面（否则翻转一半时能看到背面内容） - 若用
rotateY(180deg)翻转，背面需额外加transform: rotateY(180deg)才能正向显示，否则文字是镜像的
Chrome/Firefox 表现不一致，尤其是 Safari 完全不动？
Safari 对 preserve-3d 支持较保守，尤其在 flex/grid 容器内嵌套时容易失效；Firefox 则对 perspective 单位敏感（px 更稳，rem 或 % 可能被忽略）。
- 确保父容器有明确的
width和height（不能依赖内容撑开），Safari 对无尺寸容器的 3D 渲染常降级为 2D - 避免在
display: flex或display: grid的直接子元素上做 3D 翻转；中间加一层div并设transform-style: preserve-3d更可靠 - 加
-webkit-transform-style: preserve-3d和-webkit-perspective兼容旧 Safari，但现代 Safari（15.4+）已不需要前缀
用 transition 做翻转动画卡顿或闪一下？
翻转动画卡顿，多数是因为浏览器没把翻转元素提升为独立图层（compositing layer），导致每次重绘都走主进程；闪动则常因 backface-visibility: hidden 没生效，或初始状态未预设 transform。
立即学习“前端免费学习笔记（深入）”；
- 给翻转容器加
will-change: transform（仅动画期间，别滥用），或更稳妥地加transform: translateZ(0)强制硬件加速 - 初始状态必须写全：比如正面设
transform: rotateY(0deg)，背面设transform: rotateY(180deg)，别只靠 class 切换时才加transform - 不要用
transition: all，明确写transition: transform 0.4s ease，避免其他属性触发重排干扰 3D 渲染
真正卡住的地方往往不在怎么写，而在哪个容器该加 preserve-3d、哪个不该加，以及有没有某个看似无关的 opacity 或 filter 在背后关掉了整个 3D 上下文。调的时候先砍掉所有装饰性样式，只留最简结构，再一层层加回来。
