根本原因是未设置 transform-style: preserve-3d，导致子元素扁平化渲染；须在.card上恒定声明该属性及perspective，配合backface-visibility:hidden、正确transition位置和移动端js降级。
卡片翻转时内容消失或只显示背面空白
根本原因是没给容器设置 transform-style: preserve-3d，导致子元素默认扁平化渲染，背面被裁剪或不可见。这个属性必须加在翻转的父容器（比如 .card）上，而不是触发悬停的元素本身。
常见错误写法是只加 transform: rotateY(180deg) 却漏掉 transform-style，或者把它写在 :hover 规则里——它必须始终存在，否则 3D 空间不成立。
-
.card元素需声明transform-style: preserve-3d和perspective: 1000px（后者建议设在父级如.card-container，避免多个卡片互相干扰） - 翻转动画应作用于
.card，而不是.card-front或.card-back - 确保
.card-front和.card-back都设置了backface-visibility: hidden，否则翻转中途会看到背面内容“透过来”
:hover 触发后卡片只动了一下就卡住
这是 transition 缺失或作用对象错位导致的。CSS 翻转本质是状态切换，没有过渡属性就不会有动画效果，浏览器直接跳变。
关键点在于：transition 必须写在非 :hover 的基础样式中，且要明确指定需要过渡的属性（通常是 transform），不能只写 all——那样可能意外触发重排或性能抖动。
- 在
.card基础样式里写：transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1) - 不要把
transition放在.card:hover里，否则鼠标移入时无过渡，移出时才有 - 如果用了
rotateX却没生效，检查是否误写了rotateY；翻转轴向必须和布局方向匹配（水平翻转用rotateY，垂直翻转用rotateX）
移动端点击无效或翻转延迟明显
部分 iOS Safari 和旧版 Android 浏览器对 :hover 支持不一致，尤其在触摸设备上，:hover 可能仅在首次点击后才触发，或根本不触发。
这不是 CSS 写法问题，而是交互模型差异。纯 :hover 在移动场景下不可靠，必须补充 JavaScript 控制类名切换，或使用媒体查询降级为点击触发。
- 添加
@media (hover: none) and (pointer: coarse)规则，对触屏设备改用.card.flipped类控制翻转 - 避免依赖
:hover实现核心功能，例如卡片信息展示——背后内容应在默认态可访问 - 若坚持用
:hover，记得给.card加cursor: pointer，iOS 上有助于激活 hover 行为
翻转后文字模糊、边缘锯齿严重
这是 3D 变换引发的亚像素渲染问题，尤其在 Chrome 和 Safari 中常见。GPU 加速虽然提升动画性能，但也可能让字体渲染失真。
解决思路不是关掉硬件加速，而是微调变换原点与层级关系，让浏览器更准确地光栅化。
- 给
.card添加backface-visibility: hidden（已提过，但这里影响渲染质量） - 在
.card-front和.card-back上加transform: translateZ(0)或will-change: transform（慎用，仅当必要时） - 避免对包含大量文本的元素直接做深度旋转；可将文字包在独立
div内，并设transform: translateZ(1px)稍微拉出一点 Z 轴
transform-style、backface-visibility、transition 位置、以及移动端的交互 fallback 这四根线——少拧紧一根，线上就容易出视觉断层。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
