必须用嵌套容器结构并设绝对定位使.front与.back层叠，perspective和transform-style需同加在.card上，backface-visibility须分别加于两面，移动端需js控制翻转状态，背面内容需预设rotatey(180deg)。
直接用嵌套容器结构，否则翻转会镜像、错位或完全不动。
为什么不能把.front和.back写成同级兄弟元素？
常见错误是把正面和背面内容平级放在父容器里，比如<div class="card">
<div class="front">...</div>
<div class="back">...</div>
</div>。这样会导致两面在文档流中各自占据空间，无法重叠——翻转时不是“翻过去”，而是“正面缩进、背面弹出”，失去卡片感。
必须用绝对定位让它们物理层叠：
-
.front和.back都要设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 它们的**直接父容器**（如
.card）必须设position: relative或absolute，否则absolute会相对于更外层定位，导致偏移 - 漏掉
top: 0; left: 0是移动端错位高发原因，尤其在 flex 容器中
perspective该写在哪一层？
写在 .card 上最稳，别写在 body 或全局 wrapper。值建议用 800px–1200px：太小（如 100px）翻转像贴脸晃动，太大（如 3000px）几乎看不出深度。
注意：perspective 和 transform-style: preserve-3d 必须配对出现，且都加在同一个元素上（即 .card），否则 Safari 会退化为 2D 渲染。
- Chrome/Firefox 对
perspective位置容忍度高；Safari 15.4 之前只认直接父级上的值 - 如果
.card外层有overflow: hidden，会裁掉 Z 轴延伸部分，翻转到一半就卡住 - 某些微信安卓 WebView 会忽略
perspective，可补-webkit-perspective: 1000px
backface-visibility: hidden 必须加在哪？
必须分别加在 .front 和 .back 上，而不是加在 .card 上。不加就会在翻转中途（90° 左右）看到两面同时显示，背面文字镜像反向，尤其在 Safari 和旧版 Chrome 中非常明显。
- 漏加一个面，就等于没加——
backface-visibility只对直接子元素生效 - 微信内置浏览器对这个属性支持极差，务必加
-webkit-backface-visibility: hidden兜底 - 不要试图用
z-index控制前后顺序：3D 空间里它无效，靠的是translateZ和rotateY的组合
移动端点击翻转为何点一下就弹回？
因为 :hover 在触摸设备上不可靠，:active 又只维持毫秒级，松手立刻回退。纯 CSS 无法保持“已翻转”状态。
必须用 JS 切换类：
- 给
.card绑定click或touchend事件 - 用
element.classList.toggle('is-flipped')，而非直接操作style.transform - CSS 里写
.card.is-flipped { transform: rotateY(180deg); }，不要用:focus-within或tabindex模拟——语义错、体验差、iOS Safari 还可能失焦
最易被忽略的是：背面内容本身必须初始就带 transform: rotateY(180deg)，否则翻过去后文字是镜像的。这不是 bug，是 3D 空间里的正常投影行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
