Card翻转需三个核心CSS属性：perspective（设于外层容器）、transform-style: preserve-3d（设于包裹正反面的父元素）、backface-visibility: hidden（分别设于正面和背面元素），缺一不可，否则会出现背面透出、视角扁平或动画卡顿。
Card翻转需要哪些CSS变换属性
Bootstrap的.card默认是平面容器，要实现翻转必须启用3D渲染上下文。关键不是加个transform: rotateY(180deg)就完事，而是得配齐perspective、transform-style: preserve-3d和backface-visibility: hidden——缺一不可。否则翻转时背面会透出、视角扁平、或者动画卡顿。
常见错误是只在.card上加transform，结果整个卡片平移或缩放，但不“翻”。正确做法是把.card变成容器，内部用两个.card-body（正面/背面）并列，再用transform控制子元素旋转。
-
perspective必须设在父容器（比如.card-flip），值建议1000px～2000px，太小会畸变，太大翻转感弱 -
transform-style: preserve-3d必须加在直接包裹正反面的容器上（通常是.card或自定义wrapper） -
backface-visibility: hidden要分别加在正面和背面元素上，否则翻转一半时能看到“双面叠加”
如何结构化正反面HTML以适配Bootstrap类
Bootstrap的.card本身不支持双面，得手动拆解。不能用display: none切面——那样会破坏3D空间定位。推荐用绝对定位+z轴分层：
<div class="card card-flip">
<div class="card-front">
<div class="card-body">正面内容</div>
</div>
<div class="card-back">
<div class="card-body">背面内容</div>
</div>
</div>
注意：不要改动Bootstrap原生.card的class顺序，否则影响响应式断点。把翻转逻辑抽到外层.card-flip，保留.card作为样式基底即可。
立即学习“前端免费学习笔记（深入）”；
- 正反面容器高度需一致，否则翻转时跳动；建议统一设
height: 100%并确保父.card有明确高度 - 避免在
.card-body里用margin-bottom之类破坏盒模型，改用padding控制内边距 - 如果用
.card-img-top，它必须放在对应面的.card-body外层，否则会被transform拉伸变形
翻转触发方式与hover/focus兼容性处理
纯CSS翻转最常用:hover，但移动端没hover，且键盘用户需要:focus-within。Bootstrap 5.3+支持data-bs-toggle，但原生不支持翻转——得自己补JS或用:focus模拟。
安全做法是用pointer-events: auto配合tabindex="0"让卡片可聚焦，再写&:hover, &:focus-within规则。否则键盘用户Tab过去却无法触发翻转，不符合WCAG。
- 移动端建议加
@media (hover: none)降级为点击切换，用JS监听click并切换.is-flipped类 - 不要用
transition: all .3s——会过渡所有属性，拖慢性能；明确写transition: transform .3s ease - Chrome 115+对
will-change: transform更敏感，加在翻转容器上能防闪烁，但别滥用，每个元素都加反而伤性能
IE11及旧版Safari的兼容性兜底方案
IE11不支持preserve-3d，Safari 12以下对backface-visibility支持不稳定。这时候翻转会崩成两层叠在一起，或者直接不转。
不能靠Autoprefixer自动补前缀——transform-style和perspective的旧版语法差异大，必须手动处理：
- 给
.card-flip加-webkit-perspective: 1200px和perspective: 1200px - 正反面元素加
-webkit-backface-visibility: hidden和backface-visibility: hidden - IE11下彻底放弃3D，用
@supports not (transform-style: preserve-3d)写降级：仅做淡入淡出或上下滑动
真正麻烦的不是写兼容代码，而是测试时容易漏掉Safari iOS 12.4这种“看起来正常、实则背面永远不显示”的情况——必须真机连Web Inspector验证backface-visibility是否生效。
