移动端卡片翻转失效的根本原因是3d属性位置错误：perspective必须加在父容器（如.card-container）上，transform-style: preserve-3d必须设在.card上，backface-visibility: hidden需分别加在正反两面，且.card需初始化.back为rotatey(180deg)，配合js切换class实现可靠翻转。
移动端卡片翻转没纵深感、点一下没反应、翻到一半黑屏或镜像重叠——不是 CSS 写错了，而是 perspective 加错了地方，且没配齐另外两个关键属性。
perspective 必须加在父容器上，不能写在 .card 上
很多人直接给 .card 加 perspective: 1000px，结果只有平面旋转。因为 perspective 定义的是“你站在哪看这个 3D 场景”，它只对子元素生效，不作用于自身。
-
.card-container { perspective: 800px; }是正确写法（推荐范围：600px–1200px） - 值太小（如 300px）会导致翻转时明显畸变；太大（如 3000px）则几乎看不出深度
- 别用
transform: perspective(1000px)—— 这是无效语法，且不触发子元素 3D 继承 - uni-app 或小程序中，确保样式写在包裹
<view class="card"></view>的外层<view class="card-wrapper"></view>上
transform-style: preserve-3d 必须设在 .card 上
这个属性不是可有可无的装饰，它是让正反面真正“分层”在 3D 空间里的开关。它只对直系子元素生效，且无法被祖先继承。
-
.card { transform-style: preserve-3d; }✅ 正确位置（.card直接包裹.card__front和.card__back） -
.card-container { transform-style: preserve-3d; }❌ 错误：.card 自身没开启 3D 上下文，子元素仍被压平 -
.card不能有overflow: hidden，否则会裁剪翻转到 90° 时伸出的侧面 - 旧版 Safari（iOS 15.4 之前）需补
-webkit-transform-style: preserve-3d
backface-visibility: hidden 必须分别加在正反两面上
漏掉这句，翻转到 90° 左右时你会看到正面和背面同时渲染，文字镜像重叠、颜色混叠，Safari 下甚至全黑。
-
.card__front, .card__back { backface-visibility: hidden; }✅ 两个面都要加 -
.card { backface-visibility: hidden; }❌ 无效：该属性只对自身生效，不影响子元素 -
.card__back必须初始化为transform: rotateY(180deg)，否则翻转后内容方向反了 - 旧版 Safari 可补
-webkit-backface-visibility: hidden - 两个面要用
position: absolute叠在同一区域，尺寸一致，否则翻转时会跳动
移动端必须用 JS 切换 class，不能只靠 :hover
iOS Safari 和多数安卓 WebView 对 :hover 支持极不稳定：点击一次可能不触发，或需要双击，松手立刻回弹。
- 监听
touchstart（加{ passive: true }避免阻断滚动），用element.classList.toggle('is-flipped')切换状态 - CSS 中写
.card.is-flipped { transform: rotateY(180deg); }，不要只给单个面加 transition - 给
.card加tabindex="0"，保证键盘用户也能操作 - uni-app / 小程序中，避免使用
display: none控制背面显隐——它会中断 3D 渲染流，导致卡顿或白屏
真正容易被忽略的是：所有 3D 属性都依赖层级结构的精确性。perspective、preserve-3d、backface-visibility 各自生效的位置不同，挪错一层，整个翻转就失效。检查 computed styles 时，重点看这三个属性是否出现在预期的 DOM 节点上，而不是只看有没有声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
