卡片不翻转是因为缺perspective和transform-style: preserve-3d；必须在父容器设perspective（500–1500px），在翻转容器设preserve-3d，正反面加backface-visibility: hidden并绝对定位重合。
为什么直接加 transform: rotateY(180deg) 没反应
卡片不翻转，大概率是缺了两个关键前提：父容器没开启 3D 渲染上下文，且子元素没设置 transform-style: preserve-3d。浏览器默认把所有变换压平在 2D 平面，rotateY 在这种环境下会被降级成无效操作。
必须在翻转容器（通常是卡片外层 wrapper）上加：transform-style: preserve-3d；同时建议给它的父级（比如卡片容器本身）加上 perspective: 1000px —— 这个值不是越大越好，500–1500px 是较自然的视觉深度范围，太小会夸张变形，太大则像贴纸一样扁平。
常见错误写法：
.card:hover .front {
transform: rotateY(180deg); /* ❌ 缺少 preserve-3d，且没设 backface-visibility */
}
前后两面怎么避免悬停时“闪一下”或内容重叠
核心是控制背面可见性与层级。默认情况下，翻转后背面文字仍会显示（只是镜像），而且前后层可能因未明确 z 轴顺序而打架。
- 给正面和背面都加
backface-visibility: hidden，强制隐藏翻转后的背面（否则 iOS Safari 常见文字反向显示） - 用
z-index或更稳妥的transform: translateZ()明确前后关系：正面设transform: translateZ(50px)，背面设transform: translateZ(-50px)（注意单位要一致） - 确保正面和背面尺寸完全一致、定位重合（推荐用
position: absolute; top: 0; left: 0; width: 100%; height: 100%）
如何让翻转动画更顺滑且兼容主流浏览器
仅靠 transition: transform 0.6s ease 不够。iOS Safari 和旧版 Chrome 对 transform 的硬件加速支持不稳定，需手动触发 GPU 渲染。
- 在翻转容器上加
will-change: transform（仅用于悬停元素，别滥用） - 补全各厂商前缀（虽然现代浏览器已基本不需要，但若需支持 Chrome ≤ 42 / Safari ≤ 9，保留
-webkit-transform更稳） - 动画时间别低于 0.3s：太快人眼难识别翻转，太慢又拖沓；
cubic-bezier(0.2, 0.8, 0.4, 1)比默认ease更有弹性感
示例关键片段：
.card {
perspective: 1000px;
}
.card-inner {
position: relative;
width: 300px;
height: 200px;
transform-style: preserve-3d;
transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.4, 1);
}
.card:hover .card-inner {
transform: rotateY(180deg);
}
.front, .back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
移动端点击翻转失效或卡顿怎么办
触摸设备没有 :hover 的稳定触发时机，单纯依赖 CSS 悬停在 iOS 上常表现为“点一下没反应，点两下才翻，再点又不回弹”。这不是 bug，是规范行为。
务实解法只有两个：
- 改用 JS 控制 class 切换（例如监听
click或touchstart，加.is-flipped类），CSS 只负责动画逻辑 - 如果坚持纯 CSS，至少加
@media (hover: hover) and (pointer: fine)媒体查询，把悬停效果限制在鼠标设备，移动端 fallback 为静态双面布局或点击切换
另外，transform: rotateY() 在低端 Android WebView 中偶发渲染撕裂，可加 transform: translateZ(0) 强制启用 GPU 加速（但别加在动画元素上，容易引发重排）。
真正麻烦的是多卡片并列时的 z-index 层叠干扰——这时得靠 JS 记录当前激活卡片索引，动态提层，纯 CSS 很难干净解决。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
