加 transform: rotatey(180deg) 没反应，根本原因是缺失 3d 渲染上下文：最外层容器须设 perspective（如 800px），直接包裹正反面的容器须加 transform-style: preserve-3d，正反两面自身须设 backface-visibility: hidden 且带 z 轴变换（如 translatez(0)）。
直接加 transform: rotateY(180deg) 没反应，不是代码写错了，是缺了 3D 渲染上下文——perspective、transform-style: preserve-3d、backface-visibility: hidden 这三者漏掉任意一个，翻转都会退化成平面抖动或完全不动。
为什么加了 rotateY 却没翻转效果？
根本原因是浏览器没开启 3D 渲染管线。CSS 的 3D 变换不是“加个 transform 就行”，它依赖三层结构协同：
-
perspective必须设在最外层容器（如.card-container），不能写进transform属性里，也不能加在卡片自身上；值建议从800px起调，太小（200px）景深过强易变形，太大（2000px）几乎看不出纵深 -
transform-style: preserve-3d必须加在直接包裹正反面的容器（如.card-inner），不是最外层 wrapper，也不是单个面；加错位置会导致子元素 Z 轴变换被强制扁平化 -
backface-visibility: hidden必须写在正反两面元素自身上（.card-front和.card-back），加在父容器上完全无效；该属性只在元素参与 3D 变换时生效，所以每个面都得带 Z 轴变换，例如transform: rotateY(0) translateZ(0)
移动端点击翻转后背面按钮点不了怎么办？
这不是 z-index 顺序问题，而是层叠上下文被 3D 变换干扰了。真机上 :hover 基本不可靠，iOS Safari 和安卓 WebView 对其支持极弱，必须用 JS 控制。
- 监听
touchstart时传{ passive: true }，否则可能阻断页面滚动 - 用 class 切换（如
is-flipped）触发翻转，别用display: none或v-show控制显隐——图层会被销毁重建，backface-visibility失效 -
.card-back翻转后需处于视觉顶层：给它设z-index: 2，.card-front设z-index: 1，且两者必须同属一个层叠上下文（即父容器没触发新层叠）
翻转中途“闪一下”或文字糊帧怎么解决？
这是移动端 GPU 渲染路径不稳定导致的，尤其在 Safari 和安卓 X5 内核中明显。核心不是动画时间或缓动函数，而是背面是否被明确丢弃。
-
backface-visibility: hidden必须写在正反两面元素自身上，且每个面都要有 3D 变换（哪怕只是translateZ(0)）来触发图层提升 - 旧版 Safari（iOS 15.4 之前）需补
-webkit-backface-visibility: hidden - 避免在翻转元素上叠加
filter、backdrop-filter或mask——它们会让 GPU 降级，backface-visibility彻底失效
最容易被忽略的一点：所有 3D 相关样式必须写在真实参与变换的元素上，而不是“看起来应该管用”的父级；一旦结构嵌套多一层、或某个容器意外触发了新层叠上下文，整个 3D 空间就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
