移动端卡片翻转需三属性协同：父容器设 perspective，翻转主体设 transform-style: preserve-3d，正反面各设 backface-visibility: hidden；缺一即导致黑屏、镜像或无纵深。
移动端用 CSS perspective 做卡片翻转，不是加了就能动，而是三个属性必须在正确层级上同时生效：父容器设 perspective，翻转主体设 transform-style: preserve-3d，正反面各自设 backface-visibility: hidden。漏掉任一环，都会出现黑屏、镜像重叠、无纵深感或点击无反应。
perspective 必须写在外层包裹容器上，不能写在 .card 上
很多人把 perspective: 1000px 直接加在 .card 元素上，结果只有平面旋转——因为 perspective 定义的是“观察者到 z=0 平面的距离”，它只对子元素的 3D 渲染上下文起作用，不作用于自身。
-
.card-container { perspective: 1200px; }✅ 推荐值范围是600px–1200px；移动端建议用1200px，避免视口缩放干扰透视比例 -
.card { perspective: 1000px; }❌ 浏览器忽略该声明，rotateY退化为 2D 旋转 - 别写
transform: perspective(1000px)—— 这是单元素变换，不创建子元素共享的 3D 空间 - uni-app 或小程序中，确保样式写在包裹
transform-style: preserve-3d 必须加在直接包裹正反面的容器上
这个属性是开关，不是装饰。它让正反面真正分层在 Z 轴上，但只对直系子元素生效，且无法被祖先继承。
- 结构是
.card { transform-style: preserve-3d; }✅ -
.card-container { transform-style: preserve-3d; }❌ 子级.card没开启 3D 上下文，仍被压平 -
.front { transform-style: preserve-3d; }❌ 叶子节点无子元素，该属性无效 - 旧版 Safari（iOS 15.4 之前）需补
-webkit-transform-style: preserve-3d -
.card不能设overflow: hidden，否则会裁剪翻转到 90° 时伸出的侧面
backface-visibility: hidden 必须分别加在正反两面自身
漏掉这句，翻转到 90° 左右时你会看到正面和背面同时渲染：文字镜像、颜色混叠，Safari 下甚至全黑或闪烁——这不是动画卡顿，是浏览器默认行为。
-
.front, .back { backface-visibility: hidden; }✅ 两个面都必须加 -
.card { backface-visibility: hidden; }❌ 该属性只对自身生效，不影响子元素 -
.back必须初始化为transform: rotateY(180deg)，否则翻转后内容方向是反的 - 旧版 Safari 需补
-webkit-backface-visibility: hidden - 两面必须用
position: absolute+top: 0; left: 0;对齐，尺寸一致，否则翻转时跳动
移动端必须用 JS 切换 class，不能依赖 :hover
iOS Safari 和多数安卓 WebView 对 :hover 支持极不稳定，纯 CSS 悬停在触摸设备上基本不可靠。点一下没反应、连点错乱、翻一半卡住，基本都是这个原因。
- 监听
click或touchstart（加{ passive: true }避免阻断滚动） - 用
card.classList.toggle('is-flipped')切换状态 - CSS 中写：
.card.is-flipped { transform: rotateY(180deg); }，过渡写在.card上 - 不要只给
.front或.back加transition，否则动画不同步 - 若需兼容微信内置浏览器旧版本，可加
-webkit-transform前缀，并用transform: translateZ(0)强制 GPU 渲染
最易被忽略的其实是层级关系：perspective 提供观察原点，preserve-3d 开启子元素 Z 轴空间，backface-visibility 控制哪一面可见——三者缺一不可，且位置不能互换。写错一层，整个 3D 效果就坍缩回 2D。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
