仅靠 transform-style: preserve-3d 不足以实现可交互的 3d 翻转卡片，必须同时设置父容器 perspective、preserve-3d 加在直接包裹正反面的容器上、背面显式 rotatey(180deg) 并启用 backface-visibility: hidden。
直接说结论：仅靠 transform-style: preserve-3d 不足以实现可交互的 3D 翻转卡片，它只是必要条件，不是充分条件；漏掉父容器的 perspective 或子元素的 transform 旋转轴设置，翻转会“扁平化”或完全不可见。
为什么卡片翻转后背面看不见？
常见现象是：设置了 preserve-3d，但翻转到 180° 时背面一片空白，甚至整个卡片消失。根本原因是没有为翻转容器（通常是卡片外层 wrapper）指定 perspective —— 它决定了 3D 空间中“观察者离元素多远”，缺失时浏览器按 2D 渲染，preserve-3d 失效。
-
perspective必须加在父容器（如.card）上，不能只加在子元素（如.card__face）上 - 值推荐 800px–1200px：太小（如 100px）会导致畸变严重；太大（如 5000px）则近乎无透视感，像平行投影
- 不要和
transform: perspective()混用——后者作用于单个元素，且不触发子元素的 3D 上下文继承
transform-style: preserve-3d 该加在谁身上？
必须加在**直接包裹正反面的容器**上（即翻转动画的 transform 主体），而不是最外层或最内层。典型结构是：.card → .card__inner → .card__face.front / .card__face.back，此时 preserve-3d 要设在 .card__inner 上。
- 如果加在
.card（最外层），而.card__inner没有 transform，那么正反面仍处于默认 2D 平面，无法形成空间关系 - 如果加在
.card__face上，毫无意义——它只有自己一个子元素，不存在“子元素保持 3D 位置”的需求 - 关键点：只有当一个元素既有
preserve-3d，又对它的子元素做了不同方向的rotateX/rotateY，3D 效果才真正成立
背面为何显示为镜像或颜色异常？
这是 backface-visibility 和初始 transform 设置不当导致的。默认情况下，背面始终可见，但若未显式旋转 180°，它可能以错误朝向面对镜头。
- 正面（front）通常不需要额外 transform，保持
transform: rotateY(0deg) - 背面（back）必须显式设置
transform: rotateY(180deg)（Y 轴翻转）或rotateX(180deg)（X 轴翻转），否则它和正面共面、重叠 - 务必加
backface-visibility: hidden到两个.card__face元素上——否则翻转过程中会出现“双面同时显示”或闪烁 - 注意：
backface-visibility不影响 3D 位置计算，只控制渲染开关；没有它，某些浏览器（尤其是 Safari）会在翻转中途渲染出背面的“错位像素”
移动端触摸翻转卡顿或失效？
主要因 iOS Safari 对 3D transform 的硬件加速策略更激进，且对 perspective 值敏感。常见表现是翻转卡在 90°、动画跳帧、或 touchstart 后无响应。
- 给翻转容器（
.card__inner）加上will-change: transform，提前提示浏览器启用 GPU 加速 - 避免在
perspective容器上同时使用overflow: hidden—— iOS 会强制降级为 CPU 渲染，导致卡顿 - 触摸事件监听建议用
touchstart+touchend切换 class，而非实时监听touchmove计算角度（性能差且难控制精度） - 测试时优先用真机：iOS 模拟器常无法复现真实 3D 渲染行为
最容易被忽略的是：所有 3D 效果都依赖于“容器有深度感（perspective）、内部保留空间关系（preserve-3d）、子元素有明确空间姿态（rotate + backface-visibility）”这三者缺一不可。少一个，就退回 2D。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
