Card翻转动画需手写CSS 3D变换，非Bootstrap内置功能；必须设置perspective和transform-style: preserve-3d，前后两面绝对定位并设backface-visibility: hidden，推荐用JavaScript切换.is-flipped类以保障移动端兼容性。
Card 翻转动画的核心是 CSS 3D 变换，不是 Bootstrap 内置功能
bootstrap（包括 v5 和 v6）本身不提供 card-flip 类或翻转动画组件。所谓“bootstrap 卡片翻转”，实际是借助其 .card 结构 + 手写 css 3d 变换实现的。直接加 class="card-flip" 不会生效——这个类必须你自己定义，且需确保父容器启用 3d 渲染上下文。
必须设置 transform-style: preserve-3d 和 perspective
没有这两个声明，rotateY 或 rotateX 会退化为平面旋转，看不到“翻面”效果。常见错误是只加了 transform，却漏掉容器级的 3D 上下文配置：
-
perspective要加在翻转容器（如.card-container）上，值建议 1000–1500px；太小会夸张变形，太大则几乎看不出纵深 -
transform-style: preserve-3d必须加在直接包裹前后两面的父元素上（通常是.card或自定义的.card-inner） - 前后两面（
.card-front/.card-back）需设position: absolute且top: 0; left: 0; width: 100%; height: 100%，否则翻转时错位
用 :hover 触发时注意移动端兼容性
纯 :hover 在 iOS 和 Android 大部分浏览器中无法可靠触发，尤其在无触摸模拟的场景下。真实项目中建议：
- 用 JavaScript 切换
.is-flipped类（监听click或touchstart），避免依赖悬停 - 若坚持用
:hover，务必加媒体查询兜底：@media (hover: hover) and (pointer: fine) { .card-container:hover .card-inner { transform: rotateY(180deg); } } - 前后两面都加
backface-visibility: hidden，防止翻转时背面内容“透出”
Bootstrap 5 的 .card 结构需微调才能适配翻转
原生 .card 是流式布局，不适合绝对定位的双面叠加。推荐结构如下：
<div class="card-container">
<div class="card card-inner">
<div class="card-front">...</div>
<div class="card-back">...</div>
</div>
</div>
关键样式要点：
-
.card-container：设perspective: 1200px -
.card-inner：设transform-style: preserve-3d、transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1) -
.card-front：默认transform: rotateY(0deg) -
.card-back：默认transform: rotateY(180deg) - 翻转后（如加
.is-flipped类）：.card-inner { transform: rotateY(180deg); }
复杂点在于卡片内容（比如 .card-img-top）可能因 object-fit 或宽高比异常导致翻转错位——务必统一设 height: 100% 并检查子元素是否脱离文档流。
