根本原因是缺3d渲染上下文：最外层容器需设perspective（800px起调），直接包裹正反面的容器加transform-style: preserve-3d，正反两面均须设backface-visibility: hidden且背面初始transform: rotatey(180deg)。
直接写 transform: rotateY(180deg) 没反应，不是代码写错了，是缺了 3D 渲染上下文——perspective、transform-style: preserve-3d、backface-visibility: hidden 这三者漏掉任意一个，翻转都会退化成平面抖动或完全不动。
为什么 rotateY 加了却没翻转效果？
根本原因是浏览器没开启 3D 渲染管线。CSS 的 3D 变换不是“加个 transform 就行”，它依赖三层结构协同：
-
perspective必须设在**最外层容器**（如.card-container），不能写进transform属性里，也不能加在卡片自身上；值建议从800px起调，太小（2000px）几乎看不出纵深 -
transform-style: preserve-3d必须加在**直接包裹正反面的容器**（如.card-inner），不是最外层 wrapper，也不是单个面；加错位置会导致子元素 Z 轴变换被强制扁平化 - 只给正面加
backface-visibility: hidden不够——背面那一面也必须加，否则翻到 90° 时两面同时渲染，文字镜像重叠甚至全黑
移动端点击翻转后背面按钮点不了？
这不是 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必须写在正反两面元素自身上（.card-front和.card-back），加在父容器上完全无效 - 该属性只在元素参与 3D 变换时生效，所以每个面都得带 Z 轴变换，例如
transform: rotateY(0) translateZ(0)，光写backface-visibility不触发图层提升 - 旧版 Safari（iOS 15.4 之前）需补
-webkit-backface-visibility: hidden - 避免在翻转元素上叠加
filter、backdrop-filter或mask——它们会让 GPU 降级，backface-visibility彻底失效
最容易被忽略的一点：正反面必须用 position: absolute 叠在同一区域，尺寸严格一致，且背面初始就要设 transform: rotateY(180deg)，否则翻转后看到的是倒着的文字；任何 margin/padding 差异或 flex 自动对齐都会导致翻转时跳动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
