根本原因是未在卡片直接父容器设置transform-style: preserve-3d，导致3D变换退化为平面投影；还需配合perspective、backface-visibility: hidden及正确translateZ值才能实现真实翻转效果。
为什么 transform: rotateY() 翻不过去？
多数人卡在翻转后背面空白或内容错位，根本原因是没设 transform-style: preserve-3d。父容器（比如卡片容器）缺这句，子元素的 3D 变换就退化成平面投影，rotateY(180deg) 看起来像消失——其实只是被压扁在 Z=0 平面上，正面背面叠在一起了。
必须加在卡片的直接父容器上，且该容器不能有 overflow: hidden（会裁掉 Z 轴延伸部分）：
.card {
transform-style: preserve-3d;
transition: transform 0.6s ease;
}
.card:hover {
transform: rotateY(180deg);
}
-
preserve-3d不是加在翻转元素本身，而是它的父级（如.card） - 若用
backface-visibility: hidden隐藏背面，只对真正需要遮挡的面生效，别乱加在父容器上 - Chrome/Firefox 支持良好，但 Safari 旧版需加
-webkit-transform-style: preserve-3d
正反两面怎么写才不穿帮？
背面内容不是简单复制粘贴就能用。常见错误是两面都用默认 transform: translateZ(0)，导致翻转时没有深度分离，看起来像贴纸对折。
正确做法是给正面加 translateZ(50px)、背面加 translateZ(-50px)（数值按卡片尺寸调整），再配合 rotateY(180deg)，才能形成真实翻转感：
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
.card__front {
transform: rotateY(0deg) translateZ(60px);
}
.card__back {
transform: rotateY(180deg) translateZ(60px);
}
- 两面都要设
position: absolute且 top/left 重合，否则翻转时会偏移 -
translateZ值建议 ≥ 50px，太小（如 10px）在高 DPI 屏上几乎看不出立体感 - 别用
z-index控制前后——3D 空间里它无效，靠translateZ和rotate的组合决定视觉顺序
hover 触发翻转在移动端失效怎么办？
纯 :hover 在 iOS/Android 上基本不可靠：触摸无 hover 状态，tap 后可能闪一下就回弹。必须补 JS 切换 class 才稳。
最简方案：监听点击，切换一个 is-flipped 类，CSS 用该类控制 transform：
document.querySelector('.card').addEventListener('click', el => {
el.classList.toggle('is-flipped');
});
.card.is-flipped {
transform: rotateY(180deg);
}
- 别用
ontouchstart单独处理——和 click 事件冲突，可能导致双触发 - 如果页面有多个卡片，用事件委托更高效：
document.addEventListener('click', ...)+ 判断e.target.closest('.card') - 加
cursor: pointer提示可交互，尤其在桌面端
性能差、动画卡顿的三个硬伤点
3D 卡片最容易因渲染路径不当变卡：GPU 加速没走通、重排重绘频繁、层爆炸。关键不在“用了 3D”，而在“怎么用”。
- 确保翻转元素有
will-change: transform（仅在需要时加，别全局滥用） - 避免在翻转容器内放
box-shadow或filter: blur()——它们强制软件渲染，抵消 GPU 加速 - 如果卡片内含图片或 iframe，加上
transform: translateZ(0)强制图层提升，但注意这会增加内存占用
真要兼容低端安卓机，宁可降级为 2D 淡入淡出，也别硬撑 3D 翻转——用户感知不到“立体”，只感受到卡。
