用 transform: rotateY() 实现卡片翻转需设置 perspective 父容器、preserve-3d 和 backface-visibility: hidden，前后两面绝对定位并分别设 rotateY(0deg) 与 rotateY(180deg)，通过 JS 切换类或 :hover 触发，禁用 transition: all，仅过渡 transform。
用 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 绑定：
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共存
最易被忽略的点：翻转卡片的 z-index 在动画中途可能错乱，尤其当多个卡片堆叠时。解决方案是统一用 transform-style: preserve-3d 并确保父容器没有 overflow: hidden —— 后者会裁掉 3D 投影区域。
