缺perspective则rotateY无效，因浏览器默认2D渲染；必须在父容器设perspective（如1000px）并配合transform-style:preserve-3d和backface-visibility:hidden才能实现真实3D翻牌效果。
为什么 rotateY 翻牌没立体感？缺 perspective
直接写 transform: rotateY(180deg) 不会出3D翻牌效果，因为浏览器默认在2D平面渲染，rotateY 本身是3D变换，但必须配合 perspective 才能产生近大远小的视觉深度。这个值不能写在翻牌元素自身（否则透视原点偏移），推荐写在父容器上，比如 perspective: 1000px —— 数值越小，翻转越“夸张”；越大越平缓，1000px 是较通用的起手值。
翻牌容器必须设 transform-style: preserve-3d
父容器开启 perspective 后，它的子元素若要参与3D空间计算（比如前后两张卡片一起绕Y轴旋转），必须显式声明 transform-style: preserve-3d。漏掉这句，子元素会强行“拍平”回2D，导致背面卡片永远不可见，或旋转时错位。注意：该属性只对**直系子元素**生效，不继承。
如何让背面卡片在翻转后正确显示？用 backface-visibility
默认情况下，3D元素背面是可见的，但翻到180°时会呈现镜像内容。实际翻牌需要“正面消失、背面出现”，靠 backface-visibility: hidden 控制。这个样式要分别加在正面和背面卡片上：
- 正面卡片：翻转到 >90° 时隐藏自己
- 背面卡片：初始旋转180°，再翻转回来时才显现
典型结构是用一个 .card 包住 .front 和 .back，hover 时给 .card 加 rotateY(180deg)，两面卡片都设 backface-visibility: hidden，.back 额外加 transform: rotateY(180deg)。
立即学习“前端免费学习笔记（深入）”；
transition 写在哪？别忘了触发重排的坑
transition 必须写在被变换的元素上（通常是 .card），且只对 transform 生效，别写成 all——否则可能触发 layout 或 paint，造成卡顿。另外，Chrome/Firefox 对 perspective 的动画支持不一致，所以不要对 perspective 做 transition，只动 transform。如果翻转卡顿，检查是否意外触发了 width/height 变化，或没启用硬件加速（可加 transform: translateZ(0) 强制 GPU 渲染）。
真正难调的是 perspective 值和卡片尺寸的比例关系：卡片越宽，需要的 perspective 值通常越大，否则边缘会严重畸变；而移动端视口窄，同一数值可能显得过于扁平——得按设备动态调整，不是写死一个值就能通用。
