perspective必须写在父容器上，因为它只为子元素创建共享3d渲染上下文，而翻转依赖正面/背面子元素的rotatey变换；若设在.card上则无效，导致扁平无纵深。
perspective 属性为什么必须写在父容器上
直接给卡片元素（比如 .card）加 perspective 没用——它只对**子元素的 3D 变换生效**，而卡片翻转实际是靠 transform: rotateY(180deg) 作用在子面（正面/背面）上。所以 perspective 必须设在包裹正面和背面的共同父容器（如 .card-container）上。
常见错误：把 perspective: 1000px 写在 .card 或 .card-face 上，结果翻转扁平、无纵深感。
-
perspective值越小（如300px），翻转时透视感越强、边缘畸变越明显 - 值越大（如
2000px），越接近平行投影，显得“远”且稳重 - 不推荐用
perspective: none或省略——那样会退化为 2D 翻转，失去立体效果
如何让正面和背面真正“背靠背”不重叠
仅靠 transform: rotateY(180deg) 不够。如果不手动分离正反面，它们会挤在同一平面，翻转后还是看到正面内容（因为背面没被“推到后面”）。
关键操作是用 transform: translateZ() 把两面沿 Z 轴拉开：
- 正面保持默认：
transform: rotateY(0) translateZ(150px) - 背面必须加：
transform: rotateY(180deg) translateZ(150px) - 这里的
150px是半厚度，数值要和perspective匹配；若perspective是1000px，translateZ用100–200px比较自然
漏掉 translateZ 是翻转后“两面打架”或“只翻一半”的最常见原因。
:hover 触发翻转时，transition 该加在谁身上
必须加在**两个面的共同父容器**（即带 perspective 的那个元素）上，而不是单个面或伪类上。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
例如，翻转由 .card-container:hover .card-face 控制，但 transition 要写在 .card-face 自身：
.card-face {
transition: transform 0.6s cubic-bezier(0.5, 0.1, 0.3, 1);
}
注意点：
- 别只写
transition: all——它可能意外触发 opacity、color 等无关属性动画，拖慢性能 -
cubic-bezier(0.5, 0.1, 0.3, 1)比默认ease更有弹性感，适合翻转；太线性（linear）显得机械 - 移动端需额外加
transform-style: preserve-3d到.card容器，否则 Safari/iOS 可能不渲染 3D 层级
移动端点击翻转失效？补上 touch-action 和 will-change
iOS Safari 默认禁用非 scroll 方向的 3D 变换加速，导致点击无反应或卡顿。
两个硬性补丁缺一不可：
- 在翻转容器上加：
touch-action: manipulation，告诉浏览器“这是可交互区域，别拦截” - 在翻转元素上加：
will-change: transform，提前提示浏览器该元素将做 3D 变换，触发 GPU 加速 - 慎用
backface-visibility: hidden：虽可防背面透出，但在某些 Android WebView 中反而引发闪烁，建议只在明确出现透底时启用
没有 will-change 时，首次翻转常有 100ms+ 延迟；加上后响应基本跟手。
真正难调的不是旋转角度，是 perspective、translateZ、transform-style 这三者的数值耦合关系——改一个，另外两个往往得同步微调，否则翻转中途“抽搐”或“穿模”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
