纯CSS单词卡片翻转需确保外层容器设perspective、翻转元素设transform-style:preserve-3d且为正背面直接父级、正背面均absolute定位并设backface-visibility:hidden、背面内容初始rotateY(180deg)避免镜像；移动端须JS切换类而非:hover，Safari需加-webkit-前缀。
纯 CSS 实现单词卡片翻转效果，关键不是“怎么让文字转过去”，而是让整个卡片在 3D 空间里真实翻转——transform-style: preserve-3d 缺失、backface-visibility: hidden 漏设、或 perspective 位置错，都会导致翻到一半就消失、背面镜像、或 Safari 上完全不动。
为什么单词卡片 hover 一下就“闪退”或根本不翻？
最常见原因是把 transform: rotateY(180deg) 直接加在单词容器（比如 .word-card）上，却没给它的**直接父容器**设 transform-style: preserve-3d。浏览器默认把它当 2D 元素处理，rotateY 只是平移缩放，不是空间旋转。
-
perspective必须写在卡片的**外层容器**（如.card-wrapper），不能写在body或全局；值建议600px–1200px，太小畸变，太大无深度感 -
transform-style: preserve-3d必须加在触发翻转的那个元素（如.card）上，且它得是.front和.back的**直接父级** - 如果
.card外层有overflow: hidden，会裁掉 Z 轴延伸部分，导致翻转卡顿或截断
单词正面/背面内容怎么排版才不反向、不偏移？
单词卡片和普通图片卡片不同：你希望“背”面的英文/释义也正着读，而不是镜像。所以不能只靠 rotateY(180deg) 翻容器，而要让背面内容本身初始就朝后——即对 .card-back 单独加 transform: rotateY(180deg)，再配合 backface-visibility: hidden 控制可见性。
-
.card-front和.card-back都必须设position: absolute; top: 0; left: 0; width: 100%; height: 100%，否则翻转时错位 - 两面都必须加
backface-visibility: hidden，只加一面无效；旧版安卓 WebView（如微信）尤其敏感，漏掉必花屏 - 想增强立体感？给正面加
translateZ(60px)、背面加translateZ(60px)（不是 -60px），再各自配rotateY(0deg)/rotateY(180deg)，比单纯 rotateY 更稳
移动端点击翻转失效，JS 怎么写才不踩坑？
iOS Safari 对 :hover 支持极弱，:active 又只瞬时生效，纯 CSS 方案在手机上基本不可用。必须用 JS 切换类，但别直接操作 style.transform。
立即学习“前端免费学习笔记（深入）”；
- 用
element.classList.toggle('is-flipped')，CSS 里写.card.is-flipped { transform: rotateY(180deg); }，比手动改 style 更可靠 - 记得给卡片加
cursor: pointer，iOS 才会触发 click 事件；某些安卓机还需监听touchend替代 click - Safari 15.4 之前对
preserve-3d嵌套支持差，若仍异常，尝试把.card的display改成inline-block（flex 容器内 3D 渲染更易退化）
为什么加了所有属性，Safari 还是翻一半就停？
不是代码写错了，是 Safari 对私有前缀和渲染上下文更苛刻。标准属性没加 -webkit- 前缀，或 transform-style 没同时写双版本，就会降级为 2D 渲染。
- 所有
transform、perspective、transform-style、backface-visibility属性，都得补-webkit-版本，例如：-webkit-transform: rotateY(180deg); transform: rotateY(180deg); - 别用
will-change: transform，它在旧 Safari 上反而引发闪烁或卡死 - 如果卡片嵌套层级深（比如
.wrapper > .deck > .card > .front），优先把preserve-3d和perspective往上提一级，减少嵌套深度
真正难的不是写出能翻的代码，而是让同一套样式在 Chrome、Firefox、Safari（尤其 iOS）、微信 WebView 里都稳定翻完不穿帮——每个浏览器对 backface-visibility 和 preserve-3d 的实现细节差异，比文档写的更隐蔽。
