Bootstrap 不提供数字翻牌器组件，需自行实现CSS 3D翻转动画（rotateX+perspective）和JS控制逻辑；card/collapse等仅支持显隐或淡入淡出，无法模拟真实翻牌效果。
Bootstrap 本身不提供数字翻牌器（flip counter / number flip animation）组件，也没有内置 flipNumber 或类似功能。想用 Bootstrap 实现翻牌效果，必须自己写 CSS 动画 + JS 控制逻辑，Bootstrap 只能辅助布局、响应式或过渡类（比如 transition 相关），不能替代翻牌动画的核心实现。
为什么不能直接用 Bootstrap 的 card 或 collapse 做翻牌
常见误区是试图用 card、collapse 或 fade 类模拟翻牌——它们只能显隐或淡入淡出，无法实现「上半张数字翻起、下半张数字落下」的 3D 翻转效果。真正的翻牌需要：
- CSS
transform: rotateX()+perspective构建 3D 空间 - 两个重叠的数字层（front/back），分别控制翻转角度
- JS 控制翻牌触发时机和目标数值变化
- Bootstrap 的
.d-flex、.text-center等仅用于对齐，不参与动画
最小可行翻牌器：HTML + CSS + 少量 JS
下面是一个兼容现代浏览器、不依赖第三方库、且能和 Bootstrap 共存的轻量实现：
<div class="flip-counter d-inline-block"> <div class="flip-digit" data-value="0"><span class="top">0</span><span class="bottom">0</span></div> <div class="flip-digit" data-value="0"><span class="top">0</span><span class="bottom">0</span></div> <div class="flip-digit" data-value="0"><span class="top">0</span><span class="bottom">0</span></div> </div>
关键 CSS（需单独引入或放在 <style></style> 中）：
.flip-counter {
perspective: 200px;
}
.flip-digit {
display: inline-block;
position: relative;
width: 1em;
height: 1.5em;
font-family: monospace;
font-weight: bold;
}
.flip-digit .top,
.flip-digit .bottom {
position: absolute;
left: 0;
width: 100%;
height: 50%;
overflow: hidden;
line-height: 1.5em;
text-align: center;
}
.flip-digit .top {
border-bottom: 1px solid #ccc;
transform-origin: center top;
}
.flip-digit.flipping .top {
animation: flipTop 0.4s ease-out forwards;
}
.flip-digit .bottom {
top: 50%;
transform-origin: center bottom;
}
.flip-digit.flipping .bottom {
animation: flipBottom 0.4s ease-out 0.1s forwards;
}
@keyframes flipTop {
0% { transform: rotateX(0deg); }
100% { transform: rotateX(-180deg); }
}
@keyframes flipBottom {
0% { transform: rotateX(0deg); }
100% { transform: rotateX(180deg); }
}
JS 触发翻牌（例如从 123 → 456）：
function updateFlipCounter(target, newValue) {
const digits = String(newValue).padStart(target.children.length, '0').split('');
Array.from(target.children).forEach((digitEl, i) => {
const current = parseInt(digitEl.dataset.value);
const next = parseInt(digits[i]);
if (current !== next) {
digitEl.dataset.value = next;
digitEl.classList.add('flipping');
setTimeout(() => digitEl.classList.remove('flipping'), 500);
}
});
}
// 调用示例：
updateFlipCounter(document.querySelector('.flip-counter'), 789);
和 Bootstrap 共存时容易踩的坑
如果你在 Bootstrap 5 项目里嵌入上述代码，注意这些实际问题：
-
font-size不一致：Bootstrap 的.h1～.h6会改变em单位基准，导致.flip-digit宽高错乱 → 建议显式设font-size: 2rem并用px或固定em -
transform-style: preserve-3d缺失：某些 Bootstrap 组件（如dropdown）可能重置父容器的transform-style，导致翻牌变扁 → 在.flip-counter上强制加transform-style: preserve-3d - 移动端 touch 事件干扰：Bootstrap 的
carousel或offcanvas可能捕获touchstart，但翻牌器本身不需要 touch 支持，无需额外处理 - IE11 完全不支持
rotateX动画 → 如果必须兼容 IE，得降级为逐帧替换 +opacity淡出淡入，不再是真翻牌
真正难的不是写动画，而是让每个数字独立翻动、同步停顿、支持任意位数、并正确处理进位（比如 099 → 100）。这些细节没封装成类就很容易在多处重复出 bug，别硬套 Bootstrap 的命名习惯去“魔改”它的源码。
