3D翻转失效的主因是perspective未设在父容器、transform-style未加在卡片容器、backface-visibility未同时设于正反面、transition未写在默认状态。需确保perspective: 1000px设在.cards-grid，.card设transform-style: preserve-3d，正反面均设backface-visibility: hidden，且.card默认含transition和transform: rotateY(0deg)。
直接加 transform: rotateY(180deg) 没反应？不是写错了，是浏览器压根没开启 3D 渲染上下文。翻转失效、卡在平面、悬停后消失——90% 是 perspective 和 transform-style 放错了位置。
perspective 必须设在卡片共同父容器上
perspective 不是贴在卡片身上的“贴纸”，它是为子元素定义观察者眼睛离 3D 场景多远的全局参数。写在单个 .card 上，浏览器会忽略它；每个卡片都设一份，等于各自建了个微型镜头，hover 时旋转轴错位、边缘畸变、翻转抖动全来了。
- ✅ 正确：设在卡片的直接父容器，比如
.cards-grid { perspective: 1000px; } - ❌ 错误：
.card { perspective: 1000px; }—— 无效且干扰渲染 - ⚠️ 值建议 600px～1200px：小于 400px 易拉伸变形，大于 2000px 几乎看不出 3D 感
- ⚠️ 别写成
transform: perspective(1000px)—— 这是无效语法
transform-style: preserve-3d 必须加在卡片容器本身
浏览器默认把所有子元素拍平到同一个 2D 平面渲染。transform-style: preserve-3d 的作用就是关掉这个“拍扁开关”，让子元素保留在各自的 Z 轴位置。但它只对**直系子元素**生效，不能穿透嵌套。
- ✅ 正确：加在
.card或.card-inner这类直接包裹正反面的容器上 - ❌ 错误：加在
.card-front或.card-back上——它们是叶子节点，没有子元素需要“保持 3D” - ⚠️ 父容器若设了
overflow: hidden，会裁掉翻转中伸出的背面，看起来像卡住 - ⚠️ 如果父级（如
.cards-grid）已设transform-style: flat（默认值），会覆盖子级的preserve-3d
backface-visibility: hidden 必须同时作用于正反两面
翻转到 180° 时，正面和背面在空间中其实是重叠的。不显式隐藏背面，Chrome/Safari 会同时渲染两面，导致文字重影、颜色发灰、甚至显示空白（背面遮住了正面）。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
.card-front, .card-back { backface-visibility: hidden; } - ❌ 错误：只加在容器上、或只加在
:hover里——它得从始至终生效 - ⚠️ 移动端旧 Safari 对该属性支持不稳定，可补
transform: translateZ(0)强制 GPU 渲染 - ⚠️ 若想让背面内容可见（比如翻过去看文字），确保背面元素未被
display: none移除；用opacity: 0或visibility: hidden更安全
transition 必须写在默认状态，且初始 transform 不能为 none
过渡效果只在属性值变化时触发。transition 写在 :hover 里，移出时会瞬间切回，就是所谓“啪一下跳回去”。另外，transform: none 是关键字，不是可插值类型，无法参与动画。
- ✅ 正确：在
.card默认样式中写transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);，并设初始态transform: rotateY(0deg); - ❌ 错误：
.card:hover { transition: transform 0.6s ease; }—— 移入无动画，移出才有 - ⚠️ 避免用
transition: all，可能意外触发重排或性能抖动 - ⚠️ 移动端 iOS Safari 对
:hover支持极弱，纯 CSS 悬停基本不可靠；需用 JS 切换类名，或降级为focus-within/touchstart
最易被忽略的是：移动端没有可靠 hover，perspective 值过小会导致翻转中途“消失”，而 backface-visibility: hidden 漏设在 Chrome 下几乎必然出现重影——这些都不是 bug，是 3D 渲染模型的固有行为。
