Bootstrap 5 的 .card 不内置翻转动画，需用 CSS 3D 实现：父容器设 perspective，直接包裹层设 transform-style: preserve-3d，前后两面绝对定位并加 backface-visibility: hidden，通过 :hover 或 JS 切换 is-flipped 类触发动画。
Card翻转动画在Bootstrap 5里不内置，得自己写CSS
Bootstrap 5 的 .card 组件本身没有翻转（flip）交互逻辑或配套类。所谓“卡片翻转”，本质是用 CSS 3D 变换 + transform: rotateY() + backface-visibility: hidden 实现的两面切换效果，和 Bootstrap 的栅格、间距工具无关——它只提供容器结构，动画得你补全。
必须用 perspective 和 transform-style: preserve-3d
缺这两个声明，翻转会塌成平面、背面内容错位或直接不可见。常见错误是只加 rotateY(180deg) 却忘了父容器的 3D 上下文：
-
perspective要加在翻转容器（比如.card-flip）上，值建议1500px～2000px，太小会夸张变形，太大则看不出深度 -
transform-style: preserve-3d必须设在直接包裹前后两面的父元素上（通常是.card-inner），否则子元素的 3D 变换会被扁平化 - 前后两面（
.card-front/.card-back）需设position: absolute+top: 0; left: 0; width: 100%; height: 100%，否则无法重叠覆盖
翻转触发靠 :hover 或 JS 切换 class，别硬套 .show
Bootstrap 的 .show 是为折叠/弹窗设计的显示控制，对 3D 翻转无效；用 :hover 最简单，但移动端需额外处理（iOS Safari 不触发 :hover）。更稳妥的做法是用 JS 切换自定义类：
.card-flip.is-flipped .card-inner {
transform: rotateY(180deg);
}
- 用
addEventListener('click', ...)切换is-flipped类即可兼容所有设备 - 务必给
.card-inner加transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)，原生ease在翻转中显得生硬 - 背面内容记得加
transform: rotateY(180deg)，否则文字会镜像反向
Bootstrap 5 的 .card 结构要微调才能适配翻转
默认 .card 是单层结构，得嵌套一层容器来承载前后两面。直接在 .card 上加 perspective 会导致内边距、阴影等被 3D 变换干扰。推荐结构：
<div class="card card-flip">
<div class="card-inner">
<div class="card-front">...</div>
<div class="card-back">...</div>
</div>
</div>
-
.card-flip：仅负责perspective和尺寸约束 -
.card-inner：负责transform-style: preserve-3d和transform: rotateY() -
.card-front/.card-back：各自用backface-visibility: hidden防闪烁，且.card-back需额外transform: rotateY(180deg) - 别把
.card-header或.card-body直接当翻转面用——它们带内边距和 border，会破坏绝对定位对齐
翻转动画真正难的不是写几行 CSS，而是让前后两面在各种屏幕尺寸、字体缩放、动态内容高度下都严丝合缝。多测几个 max-height 变化的场景，overflow: hidden 往往比想象中更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
