移动端卡片翻转动画需用js切换class触发，核心是正确建立3d渲染上下文：perspective必须设在父容器（如.card-container），transform-style: preserve-3d须加在直接包裹正反面的容器上，且正反面均需backface-visibility: hidden和position: absolute对齐。
移动端卡片翻转动画不能靠 :hover，必须用 JS 切换 class 才能可靠触发；核心不是“怎么动”，而是“3D 渲染上下文有没有正确建立”。
perspective 必须加在父容器上，不是卡片本身
很多人把 perspective: 800px 写在 .card 上，结果只有平面旋转——因为 perspective 定义的是观察距离，只对子元素生效，不作用于自身。
-
.card-container { perspective: 800px; }✅ 正确：外层包裹容器设透视 -
.card { perspective: 800px; }❌ 无效：子元素（正反面）无法继承 3D 上下文 - 值推荐 600px–1200px：太小（如 300px）畸变严重；太大（如 3000px）几乎无纵深感
- 别写
transform: perspective(800px)—— 这是无效语法，且不触发子元素 3D 继承
transform-style: preserve-3d 必须设在直接包裹正反面的容器上
这个属性是开关，不是装饰。它让正反面真正“分层”在 3D 空间里，但只对直系子元素生效，且无法被祖先继承。
- 结构如果是
<div class="card"><div class="card-inner"> <div class="front"></div> <div class="back"></div> </div></div>，那transform-style: preserve-3d必须写在.card-inner上 ✅ - 写在
.card或.card-container上 ❌，子元素仍被强制扁平化 - 旧版 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; }❌ 无效：该属性只对自身生效，不影响子元素 - 旧版 Safari 需补
-webkit-backface-visibility: hidden - 两面必须都用
position: absolute; top: 0; left: 0; width: 100%; height: 100%对齐，否则翻转时跳动
移动端必须用 JS 切换 class，且要配 translateZ
iOS Safari 和多数安卓 WebView 对 :hover 支持极不稳定，纯 CSS 悬停方案在触摸设备上基本不可靠。
- 监听
click或touchstart（加{ passive: true }避免阻断滚动） - 切换类名：
card.classList.toggle('is-flipped') - 正反面初始
transform必须对称且带translateZ：.front { transform: rotateY(0) translateZ(50px); }，.back { transform: rotateY(180deg) translateZ(50px); } - 只写
rotateY(0)和rotateY(180deg)不够——它们默认都在 Z=0 平面，会重叠、闪烁 - 给卡片加
tabindex="0"，兼顾键盘焦点用户；加cursor: pointer和-webkit-tap-highlight-color: transparent避免灰块遮挡
最容易被忽略的是 translateZ 值和 transform-style 的作用层级——它不看你写了多少行 CSS，只看你哪一层真正承载了正反面，以及是否真的让它们“分层”。没这层，再漂亮的 rotateY(180deg) 也只是二维翻页。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
