翻转动画需手动实现，非Bootstrap内置功能：必须用外层容器设perspective和preserve-3d，前后两面独立且加backface-visibility:hidden，通过rotateY和.is-flipped类控制，注意兼容性与过渡设置。
翻转动画依赖 CSS 3D 变换，不是 Bootstrap 内置功能
bootstrap（包括 v5 和 v6）本身不提供 card 翻转动画的默认类或 js 支持。所谓“翻转卡片”，本质是用 transform: rotatey(180deg) 配合 backface-visibility: hidden 实现的纯 css 效果，需手动添加样式和触发逻辑。
常见错误是直接套用网上老教程里的 .card-flip 类，却发现没反应——大概率缺了容器包裹、perspective 设置，或没禁用背面可见性。
- 必须用一个外层容器（如
div）包裹前后两面卡片，该容器设perspective（推荐1500px） - 卡片容器（如
.card-container）要设transform-style: preserve-3d - 正面和背面都得加
backface-visibility: hidden，否则翻转时会看到背面内容透出 - Bootstrap 的
.card默认有border-radius和box-shadow，翻转时若出现锯齿，可加transform: translateZ(0)强制硬件加速
HTML 结构必须严格分 front/back 两层
不能只靠一个 .card 加 class 切换——那样只是显隐切换，不是真翻转。必须明确区分正面（front）和背面（back）两个独立区块：
<div class="card-container">
<div class="card-front">
<div class="card">...</div>
</div>
<div class="card-back">
<div class="card">...</div>
</div>
</div>
使用场景：产品介绍页、技能卡片、问答卡片等需要“点击看详情”的交互。如果只是 hover 触发，用 :hover 即可；如果是点击切换，需用 JS 切换 .is-flipped 类。
-
.card-front和.card-back必须绝对定位重叠，且宽高一致 - Bootstrap 的
.card内部结构（如.card-body）可照常使用，但不要在.card上直接写翻转样式 - 移动端点击翻转时，注意
cursor: pointer和touch-action: manipulation提升响应感
JS 控制翻转状态时别漏掉过渡重置
用 JS 切换 .is-flipped 类是最常用方式，但容易忽略：翻转后再次点击，要确保动画能反向执行，而不是卡住或跳变。
关键点在于过渡（transition）必须写在非状态类上（即写在 .card-container 或 .card-container > div），而不是只写在 .is-flipped 里：
.card-container > div {
transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.card-container.is-flipped .card-front {
transform: rotateY(-180deg);
}
.card-container.is-flipped .card-back {
transform: rotateY(0deg);
}
- 正面初始
transform: rotateY(0)，背面初始transform: rotateY(180deg) - 不要用
display: none控制背面显隐——它会中断 3D 渲染上下文 - Vue/React 中绑定 class 时，确保
is-flipped是响应式变量，且初始值为false - 如果翻转后内容加载慢（比如背面含图片或 iframe），可加
opacity: 0+transition-delay避免闪烁
移动端 Safari 和旧版 Android 浏览器兼容性坑
iOS 15.4+ 和 Chrome 95+ 基本没问题，但 iOS 14 及更早版本对 transform-style: preserve-3d 支持不稳定，可能出现背面错位或消失。
真实踩坑现象：.card-back 在 iPhone 上完全不可见，或翻转一半就卡住。
- 必须给
.card-container加-webkit-transform-style: preserve-3d（Safari 专有前缀） - 避免在翻转元素上使用
overflow: hidden，它会截断 3D 变换区域 - Android 4.4–6.0 的 WebView 不支持
backface-visibility，需降级为opacity: 0 / 1切换 +z-index控制层级 - 如果项目需兼容 IE，直接放弃翻转动画——IE 完全不支持
preserve-3d
真正麻烦的不是怎么写，而是怎么让翻转在各种设备上都“转得稳”。建议先在真机上测 iOS 和 Android 主流机型，再决定是否加降级方案。
