卡片翻转需在父容器设 perspective，子容器设 transform-style: preserve-3d；前后两面须绝对定位、尺寸一致；hover 应作用于外层 wrapper 并旋转其子容器；需添加 backface-visibility: hidden 和适当 transition 以确保流畅 3D 效果。
卡片翻转需要开启3D空间和正交投影
Bootstrap 4 默认不启用 3D 变换所需的 transform-style: preserve-3d，也不设置 perspective。直接套用 rotateY(180deg) 会看到“翻转但无立体感”，甚至内容错位——本质是子元素默认扁平渲染，丢失 Z 轴信息。
必须手动在父容器（如 .card）上添加：perspective: 1500px（值越小翻转越夸张，1200–2000 是常用范围）
并在翻转触发层（如 .card-inner）设：transform-style: preserve-3d
- 不要把
perspective写在:hover上，否则动画开始时才生效，首帧会跳变 -
preserve-3d必须作用于直接包裹正面/背面的容器，不是最外层.card - Bootstrap 4 的
.card-body等自带 padding 和 margin，容易干扰翻转中心，建议用额外 wrapper 包裹 front/back
前后两面需绝对定位且共享尺寸
如果不控制尺寸和定位，背面内容会撑开布局、遮挡正面，或翻转后位置偏移。Bootstrap 4 的 .card 默认是流式布局，不能直接塞两个 .card-body 进去。
正确做法是：用一个 .card-flip-wrapper（设 position: relative; height: 100%），内部放两个子块：.card-front 和 .card-back，均设为：position: absolute; top: 0; left: 0; width: 100%; height: 100%
- 两面内容需使用相同高度（例如都用
h-100），否则翻转时会拉伸/压缩 - 背面默认要加
transform: rotateY(180deg)，否则初始状态就显示背面 - 避免在 front/back 内部用
.card-img-top等响应式类，它们可能触发重排导致翻转抖动
hover 触发时只旋转 wrapper，别动单面
常见错误是给 .card-front:hover 加 rotateY(180deg)，结果只有正面转、背面不动，视觉上像“正面消失+背面淡入”，不是真正的 3D 翻转。
正确逻辑是：hover 作用于外层 wrapper，带动整个 3D 子树旋转：.card-flip-wrapper:hover .card-inner { transform: rotateY(180deg) }
-
.card-inner是 front/back 的共同父容器，它必须设transform-style: preserve-3d - 动画时间建议用
transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55)，比默认ease更顺滑 - 移动端 Safari 对
backface-visibility敏感，务必给两面都加backface-visibility: hidden，否则翻转中途可能闪现背面内容
兼容性注意：IE 和旧版 Android WebView 不支持 preserve-3d
Bootstrap 4 官方文档没提翻转，因为 preserve-3d 在 IE 10/11 和 Android 4.4 WebView 中完全失效——此时翻转会退化成“正面缩出+背面缩入”，毫无 3D 感。
立即学习“前端免费学习笔记（深入）”；
- 如需兼容，得用 JS 检测：
if (!CSS.supports('transform-style', 'preserve-3d'))，然后降级为 opacity 切换 - Bootstrap 4 的 flex 工具类（如
d-flex）在翻转容器内可能干扰布局，建议关闭或用flex-column显式控制 - Chrome 90+ 对
will-change: transform更敏感，加在.card-inner上可提升帧率，但别滥用，否则触发过多图层合成
翻转效果是否生效，第一眼先看控制台有没有 warning “backface-visibility ignored”，有就说明浏览器已静默禁用 3D 渲染，这时候调样式没用，得换策略。
