Bootstrap 如何制作一个漂亮的卡片翻转效果 Bootstrap 卡片动画优缺点-Bootstrap教程-PHP中文网

用 transform: rotateY() 实现卡片翻转需设置 perspective 父容器、preserve-3d 和 backface-visibility: hidden，前后两面绝对定位并分别设 rotateY(0deg) 与 rotateY(180deg)，通过 JS 切换类或 :hover 触发，禁用 transition: all，仅过渡 transform。

Bootstrap 如何制作一个漂亮的卡片翻转效果 Bootstrap 卡片动画优缺点 - php中文网

用 `transform: rotateY()` 实现卡片翻转，不是靠 Bootstrap 自带组件

Bootstrap 本身不提供「卡片翻转」的内置类或 JS 插件。所谓“Bootstrap 卡片翻转”，实际是用 Bootstrap 的卡片结构（.card）+ 手写 CSS 3D 变换实现的。关键在于把卡片容器设为 perspective，再对前后两面分别控制 transform: rotateY(0deg) 和 rotateY(180deg)。

常见错误是直接给 .card 加 rotateY，结果整张卡片（含边框、阴影）一起翻——正确做法是用两个子容器（如 .card-front 和 .card-back），包裹在 .card-flip 容器里，只翻它们。

必须给父容器加 perspective（推荐 1500px），否则 3D 效果塌成 2D
前后两面需设 position: absolute + backface-visibility: hidden，否则翻转时会看到背面内容镜像
Bootstrap 5 默认启用 prefers-reduced-motion 媒体查询，动画可能被系统级禁用，需显式覆盖：
```
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; } }
```

翻转触发方式：hover 还是点击？取决于交互场景

纯 :hover 翻转在桌面端直观，但在移动端无效（无 hover 状态）。如果要兼容手机，必须用 JavaScript 切换 class（如 .is-flipped）。

用 data-bs-toggle="flip" 模拟 Bootstrap 风格是常见做法，但注意：Bootstrap 本身不识别这个属性，得自己写 JS 绑定：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

document.querySelectorAll('[data-bs-toggle="flip"]').forEach(el => {
  el.addEventListener('click', () => el.classList.toggle('is-flipped'));
});

hover 方案适合信息展示型卡片（如技能图标、产品特性），响应快、零 JS
点击方案适合需要用户主动确认的场景（如密码卡、答题卡），且可配合 aria-live 提升可访问性
避免在卡片内放 <button></button> 或 <a></a> 后再监听父级 click —— 事件冒泡易误触，建议 stopPropagation()

性能与兼容性：iOS Safari 15.4+ 才真正稳定支持 `backface-visibility`

旧版 iOS Safari（尤其是 13–14）对 backface-visibility: hidden 支持不一致，常出现翻转后背面内容残留、闪烁或卡顿。这不是代码写错，是渲染引擎限制。

能做的妥协只有两个：

降级处理：对 userAgent 包含 iOS.*Safari 且版本 opacity + transition）
强制硬件加速：给翻转容器加 transform: translateZ(0) 或 will-change: transform，但后者慎用，可能引发内存泄漏
不要在翻转动画中同时改变 height 或 padding —— 会触发重排（reflow），卡顿明显

为什么别用 `transition: all .3s`？参数粒度决定体验

写 transition: all .3s 看似省事，但会导致所有属性都参与过渡，比如 box-shadow、border-color 也会慢慢变，干扰焦点。更糟的是，某些属性（如 display）根本不能过渡，反而让动画中断。

应只过渡明确可控的属性：

.card-flip-inner {
  transition: transform .4s cubic-bezier(.215,.61,.355,1);
}

cubic-bezier(.215,.61,.355,1) 是「缓入缓出」，比默认 ease 更自然
时间设 .4s 而非 .3s：人眼识别翻转动作需至少 300ms，太短显得突兀，太长又拖沓
千万别在 @keyframes 里写 rotateY 再用 animation 控制——它无法响应点击 toggle，且难以和 hover 共存