perspective 必须加在卡片的最近共同父容器上而非翻转元素本身，否则无法建立3D渲染上下文；需配合 transform-style: preserve-3d、backface-visibility: hidden 和正确 transform-origin 才能实现可靠翻转。
perspective 不是加在翻转元素上，而是加在它的父容器上——这是 90% 人翻转失败的根源。
为什么卡片不翻转？检查 perspective 的作用对象
翻转动画依赖 CSS 3D 渲染上下文，而 perspective 必须作用于包含卡片的**最近共同父容器**（比如 .card-container），不能直接写在 .card 或 .card-front 上。否则浏览器无法建立 3D 投影空间，rotateY(180deg) 就只是个扁平旋转。
-
perspective值建议在600px–1000px之间：太小（如100px）会导致畸变严重；太大（如3000px）则翻转像在远处“滑动”，失去立体感 - 移动端需配合
transform-style: preserve-3d在同一父容器上声明，否则子元素的 3D 变换会被拍平 - 别忘了给翻转元素（如
.card）加transform-style: preserve-3d，它和父级的perspective是配套生效的
移动端触摸触发翻转：用 :hover 还是 JavaScript？
iOS Safari 和多数安卓 WebView 对 :hover 支持不稳定——点击一次可能不触发，或需要双击。真机调试时大概率失效。
- 推荐用
tap事件 + 切换 class：监听touchstart（避免click300ms 延迟），给.card添加is-flipped类 - CSS 中用
.card.is-flipped .card-inner控制transform: rotateY(180deg)，比纯伪类更可靠 - 加
backface-visibility: hidden到.card-front和.card-back，防止背面内容在翻转中途“透出”
transform-origin 设错会导致翻转轴偏移
默认 transform-origin: 50% 50% 是绕中心翻转，但若卡片有 padding/margin 或被 flex 容器约束，视觉中心可能偏移。尤其在竖屏窄屏下，容易看起来“歪着翻”。
立即学习“前端免费学习笔记（深入）”；
- 显式写死：例如
transform-origin: center center（等价于50% 50%），避免受盒模型影响 - 如果想沿左侧边缘翻转（像书页），设为
transform-origin: left center，此时rotateY才真正绕左边缘转 - 注意：
transform-origin要加在执行rotateY的元素上（通常是.card-inner），不是父容器
最常被忽略的是 perspective 的单位和层级关系：它必须是像素值（px），不能用 rem 或百分比；且它的父容器不能有 overflow: hidden，否则 3D 元素翻转到背面时会被裁掉——这点在 iOS 上尤其明显。
