翻转卡片失效的根本原因是 perspective、transform-style 和 backface-visibility 三者层级错位或未适配触摸交互：perspective 必须设在卡片父容器上，transform-style: preserve-3d 需加在直接包裹正反面的元素上，backface-visibility: hidden 必须分别加在正反面自身，移动端还需 JS 控制翻转并避免 hover 依赖。
翻转卡片在响应式页面中看不见背面、动画卡顿或移动端完全不触发，根本原因不是 CSS 写错了，而是 perspective、transform-style 和 backface-visibility 三者作用层级错位，或未适配触摸交互。
perspective 必须加在卡片共同父容器上，不能写在 .card 自身
把 perspective: 1000px 直接加在 .card 元素上，浏览器会忽略它——因为 perspective 定义的是“观察者到子元素所在 Z=0 平面的距离”，它只对子元素生效，不作用于自身。
- ✅ 正确做法：用外层容器包裹所有卡片，例如
.cards-grid或.card-container，并设perspective: 800px（600–1200px 是安全范围） - ❌ 错误写法：
.card { perspective: 1000px; transform: rotateY(180deg); }—— 这里perspective完全无效 - 数值太小（如 200px）会让翻转时背面缩成一条线；太大（如 3000px）则接近平面切换，失去 3D 感
- 移动端建议用
perspective: 1200px，避免因视口缩放导致透视失真
transform-style: preserve-3d 必须设在直接包裹正反面的容器上
transform-style: preserve-3d 的作用是让子元素保留在独立 Z 轴位置，而不是被压平到同一平面。它只对直系子元素生效，且不可继承。
- ✅ 正确位置：加在
.card或.card-inner上（即直接包含.card-front和.card-back的那个元素） - ❌ 错误位置：加在
.card-container或.card-front上——前者影响不到子卡片，后者没有子元素需要保留 3D - 如果祖先元素（比如
.section）设置了overflow: hidden或任意transform（包括translateZ(0)），可能截断 3D 渲染层，导致背面被裁掉 - Safari 旧版本（iOS 15.4 之前）需补
-webkit-transform-style: preserve-3d
backface-visibility: hidden 必须分别加在正反面元素上
不加这句，翻转到 90° 时你会看到正面和背面同时渲染，文字镜像、颜色混叠、甚至内容“消失”——这不是 bug，是浏览器默认行为。
立即学习“前端免费学习笔记（深入）”；
- ✅ 必须写在两个面自身：
.card-front, .card-back { backface-visibility: hidden; } - ❌ 加在
.card或:hover里都无效；也不能只加一面 - 移动端 Safari 对该属性支持不稳定，可配合
transform: translateZ(0)强制 GPU 渲染 - 如果想让背面初始就朝后，要给
.card-back单独加transform: rotateY(180deg)，而不是靠动画“转过去”
响应式与移动端必须用 JS 补点击逻辑，不能只靠 :hover
iOS Safari 和多数安卓 WebView 几乎不响应 :hover，纯 CSS 悬停在触摸设备上等于失效。
- ✅ 移动端必须用 JavaScript 切换 class，例如：
element.classList.toggle('is-flipped') - ⚠️ 不要用
setAttribute('class', ...)反复覆盖，容易丢其他 class - 给
.card加cursor: pointer和touch-action: manipulation提升点击响应 - 媒体查询中可禁用 hover 动画：
@media (max-width: 768px) { .card:hover .card-inner { transform: none; } }，再由 JS 控制 - 避免在
transform中混用 px 和 %，iOS 对小数像素计算敏感，易抖动
最常被忽略的不是某个属性怎么写，而是整套 3D 渲染上下文的层级关系：perspective 定义观察距离，preserve-3d 开启空间保留，backface-visibility 控制面可见性——三者缺一不可，且必须落在正确的 DOM 层级上。一旦祖先节点有 overflow: hidden 或隐式 transform，整个 3D 效果就会无声失效。
