rotateY(180deg)没反应是因为3D渲染上下文未激活：必须在卡片直接父容器设perspective（600–1200px），在.card上设transform-style: preserve-3d（不可写在.front/.back或wrapper上），且正反面均需position: absolute、backface-visibility: hidden及translateZ拉开距离，移动端须用JS切换class而非:hover。
transform-style: preserve-3d 必须加，否则 rotateY(180deg) 只是“贴纸平移”，根本翻不过去。
为什么 rotateY(180deg) 没反应？
不是代码写错了，而是 3D 渲染上下文没激活。浏览器默认把所有变换压平在 Z=0 平面，rotateY 看起来像消失或错位。
-
perspective要加在卡片的直接父容器上（比如.card-container），值建议600px–1200px；写在body或全局会导致透视中心偏移 -
transform-style: preserve-3d必须加在翻转动作发生的那个元素上（比如.card），不是.front也不是最外层 wrapper - 该容器不能有
overflow: hidden—— 否则会裁掉 Z 轴延伸部分，背面直接被砍掉 - Safari 旧版本需补
-webkit-transform-style: preserve-3d
前后两面怎么叠才不穿帮？
正反面不是简单并列，而是要靠 translateZ 拉开物理距离，形成真实翻转感。
-
.front和.back都必须设position: absolute; top: 0; left: 0; width: 100%; height: 100% -
.back额外加transform: rotateY(180deg) translateZ(60px)（正面可配translateZ(60px)或保持0） -
translateZ值建议 ≥50px；太小（如10px）在高 DPI 屏上几乎无立体感 - 别用
z-index控制前后——3D 空间里它无效，视觉顺序由translateZ+rotate共同决定
backface-visibility: hidden 什么时候必须加？
不加的话，翻转到 90° 左右时，正面和背面会同时显示，尤其在 Safari 和微信 WebView 中容易花屏。
- 必须给
.front和.back都加backface-visibility: hidden，缺一不可 - 只加在父容器上无效，这个属性只对直接子元素生效
- 安卓 WebView 对该属性更敏感，漏掉大概率导致背面内容镜像、重叠或闪烁
- 可加
-webkit-backface-visibility: hidden兜底旧版 Safari
移动端点击翻转为什么失效？
纯 :hover 在 iOS 和多数安卓浏览器中基本不可靠：触摸无 hover 状态，tap 后可能闪一下就回弹。
立即学习“前端免费学习笔记（深入）”；
- 必须用 JS 切换 class（如
.is-flipped），CSS 写.card.is-flipped { transform: rotateY(180deg); } - 不要用
:active替代 —— 它只在按下瞬间生效，松手即恢复，无法保持状态 - 若需兼容 PC 和移动端，可用
@media (hover: hover)区分：PC 用:hover，移动端绑定click或touchend - 按钮本身要保留
pointer-events: auto，避免伪元素或装饰层遮挡热区
perspective 和 transform-style 的作用层级搞错，以及移动端交互路径没切换。这两个点漏一个，效果就只剩二维假翻转。 
