Bootstrap未定义card-flip类，需手写CSS 3D变换；必须设置perspective（外层容器）、transform-style:preserve-3d（.card-inner）、backface-visibility:hidden和position:absolute（正背面），缺一不可。
为什么直接加 card-flip 类没反应
因为 Bootstrap（v5/v6）压根没定义 card-flip 这个类，也不是内置组件。所谓“翻转”，本质是手写 CSS 3D 变换，必须自己搭结构、配样式。常见错误是只给 .card-inner 加了 transform: rotateY(180deg)，却漏掉两个关键容器级声明：perspective 和 transform-style: preserve-3d——缺一不可，否则旋转就是平面翻页，看不到“立体翻面”效果。
perspective 和 transform-style: preserve-3d 往哪加
这两个声明不能加在同一个元素上，分工明确：
-
perspective: 1200px必须加在最外层容器（比如.card-container），值太小（如200px）会畸变，太大（如5000px）则纵深感弱到几乎看不出翻转 -
transform-style: preserve-3d必须加在直接包裹前后两面的父元素上（通常是.card-inner），不是加在.card或.card-container - 如果用了 Bootstrap 的原生
.card结构，它默认是流式布局，不支持绝对定位叠加；建议套一层.card-inner，再把.card-front和.card-back作为子元素
前后两面怎么叠才不穿帮
翻转时正面内容从背面“透出来”，或两面错位偏移，基本都出在这几处：
-
.card-front和.card-back都得设position: absolute; top: 0; left: 0; width: 100%; height: 100%，否则尺寸/定位失准 - 两者都必须加
backface-visibility: hidden，否则旋转到中间角度时背面内容会“露馅” - 默认状态建议：正面
transform: rotateY(0deg)，背面transform: rotateY(180deg)；翻转后统一动.card-inner的transform，别分别改两面 - 若卡片里有表格、轴标签等复杂布局，注意它们的
z-index或transform-origin可能干扰翻转轴心，优先用transform-origin: center锚定
用 :hover 还是 JavaScript 切换
纯 :hover 在移动端基本不可靠，iOS Safari 和 Android Chrome 大部分版本都不触发，尤其当页面没启用触摸模拟时。真实项目中更稳妥的做法是：
- 用 JS 监听
click或touchstart，切换一个自定义类如.is-flipped - 如果非要用
:hover，至少加媒体查询兜底：@media (hover: hover) and (pointer: fine) { .card-container:hover .card-inner { transform: rotateY(180deg); } } - 过渡动画用
transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1)比ease更自然，避免机械感
最易被忽略的是：翻转动画不是“加个类就完事”，而是三层结构（容器 → 内层 → 正背面）+ 四个核心 CSS 声明（perspective、transform-style、backface-visibility、position: absolute）协同生效。少一个，就只剩“转了个寂寞”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
