翻转效果失效的根本原因是perspective未加在父容器上，而应设在父容器并配合transform-style: preserve-3d；卡片需设backface-visibility: hidden；过渡仅限transform；移动端须用js切换class而非依赖hover。
perspective 必须加在父容器上，不是卡片本身
加了 transform: rotateY(180deg) 却没翻转，八成是把 perspective 错写在了卡片元素上。它不是变换函数，而是创建 3D 渲染上下文的“观察距离”，只对子元素生效。
-
perspective值建议设在600px～1200px：太小（如100px）会严重畸变；太大（如5000px）几乎看不出立体感 - 父容器（比如
.card-container）需同时设perspective和transform-style: preserve-3d，否则子元素的 3D 变换会被强制扁平化 - 卡片本身不用设
perspective，但必须设backface-visibility: hidden，否则翻转后背面文字可能闪烁或透出
hover 触发时只过渡 transform，别用 all
写 transition: all 0.4s ease 看似省事，实际会让所有属性（比如 opacity、margin）都动起来，干扰翻转节奏。真正要过渡的只有旋转动作本身。
- 卡片元素加
transition: transform 0.4s ease，明确限定过渡目标 -
:hover状态下只改transform: rotateY(180deg)，不叠加scale或translate - 正反面都要用
position: absolute+top: 0; left: 0; width: 100%; height: 100%，保证重叠基准一致 - 背面默认加
transform: rotateY(180deg)，这样初始时正面朝前、背面朝后，翻转才自然
移动端点击失效？别只靠 hover
iOS Safari 和多数安卓浏览器默认不触发 :hover，纯 CSS 的悬停方案在触摸设备上基本不可靠。
- 临时兼容方案：加一条空的
.card:active { transform: rotateY(180deg); }，利用 :active 激活伪类（仅对老 iOS 有效） - 推荐做法：用 JS 切换 class，例如
card.classList.toggle('is-flipped')，再写.card.is-flipped { transform: rotateY(180deg); } - 务必加
cursor: pointer和-webkit-tap-highlight-color: transparent，避免点击时出现灰块遮挡内容
翻转后文字模糊或边缘锯齿？试试硬件加速
Chrome 和 Safari 在某些 GPU 下对 3D 变换中的文本渲染不稳定，尤其卡片带 border-radius 或阴影时更明显。
- 给卡片加
transform: translateZ(0)可强制启用 GPU 渲染，成本低、兼容性好 - 慎用
will-change: transform：它会提前占用 GPU 资源，只适合频繁动画的元素，普通卡片没必要 - 如果用了
filter（比如阴影）或overflow: hidden，可能截断 3D 渲染层，需检查是否意外裁剪了背面内容
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
