perspective必须加在卡片父容器（如.card-container）上，而非.card本身；backface-visibility: hidden需分别设于.card-front和.card-back以防止背面透出；transition和transform-style: preserve-3d必须设在.card上以保证3d同步翻转。
perspective属性该加在谁身上？
必须加在卡片的父容器上，而不是卡片本身。加在卡片上会导致子元素（正面/背面）的3D变换失去共同消失点，翻转看起来“飘”或错位。
常见错误是把 perspective 写在 .card 上，结果翻转时左右不对称、Z轴偏移异常。
正确做法是用一个包裹容器（比如 .card-container），给它设置 perspective: 1000px（数值越大，3D感越弱；500–1500px 是常用范围）。
backface-visibility为什么必须设为hidden？
不设的话，翻转到180°时，背面内容会“透出”正面——尤其在 Chrome 或 Safari 中，可能看到双层重叠、文字反向、甚至闪烁。
这个属性要分别加在正面（.card-front）和背面（.card-back）两个子元素上：
-
backface-visibility: hidden阻止浏览器渲染元素背向镜头的那一面 - 它不控制是否显示，只控制“是否绘制”，对性能也有轻微优化
- 即使你用了
transform: rotateY(180deg)，没加这句，背面仍可能被当作正面渲染一次
rotateY翻转时，transition该绑定在哪一级？
必须绑定在卡片整体（即 .card 元素），而不是单独绑在 front/back 上。
否则会出现“正面滑动、背面静止”或“两面不同步”的撕裂感。
关键点：
.card { transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1); }- 触发翻转靠的是给
.card加transform: rotateY(180deg)（例如通过 hover 或 JS 切换 class） - 不要给 front/back 单独写
transition: transform，那会让它们各自动画，失去同步锚点 - 注意：
transform-style: preserve-3d必须设在.card上，否则子元素的 3D 位置会被压平
移动端点击翻转失效或卡顿怎么办？
主要因为 iOS Safari 对 hover 支持不一致，且默认禁用非合成层动画。
解决路径：
- 改用
click触发（JS 切换.is-flipped类），并确保.card有cursor: pointer和touch-action: manipulation - 强制启用 GPU 加速：
.card { will-change: transform; }（仅在翻转频繁时加，避免滥用） - 避免在
transform中混用px和%值，iOS 对小数像素计算更敏感，易导致渲染抖动 - 如果卡片内含图片或字体图标，确保它们已加载完成再触发翻转，否则首次翻转可能空白一闪
transform-style: preserve-3d 的层级归属——它必须出现在承载旋转动作的元素上，且其父级不能有 overflow: hidden（会剪裁 3D 空间）。这点一旦出错，整个效果就退化成 2D 切换。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
