必须为 transform 显式声明 transition 才能产生动画，.card 基础样式需加 transition: transform 0.3s ease，配合 transform-origin: center、z-index: 2 及移动端 :active 或 js 模拟，并控制 scale 在 1.03～1.05 以兼顾性能与体验。
直接加 transform: scale(1.05) 没反应，是因为缺 transition；放大后内容被裁、阴影消失、移动端没反馈——这些不是“效果没加好”，而是关键配置漏了。
为什么 .card:hover { transform: scale(1.05); } 不动？
浏览器默认不为 transform 做过渡，必须显式声明 transition 才能产生动画。只写在 :hover 里，首次悬停会跳变；写在基础类里才稳定。
-
.card上必须声明transition: transform 0.3s ease;（不能只写transition: all） - 别把
transition放在.card:hover里——它只控制“如何进入”，不定义“如何离开” - 如果用了
!important覆盖 Bootstrap 默认样式，可能压掉你自定义的transition - 检查是否被父容器的
overflow: hidden截断——放大后内容出界，看起来像“没动”，其实是被裁掉了
放大后卡片溢出、遮挡、错位怎么办？
transform: scale() 不影响文档流，但视觉尺寸变大，容易和周围元素打架。解决重点不在“怎么缩放”，而在“怎么包裹和定位”。
- 给
.card加transform-origin: center;，避免默认从左上角缩放导致偏移 - 放大时加
z-index: 2;，防止被相邻卡片盖住（Bootstrap 默认z-index是 0 或 1） - 若卡片在
.row > .col中，别改display或position——破坏栅格；改用overflow: visible或外层加.card-wrapper并设固定高 +overflow: hidden - 内部图片要补
max-width: 100%; height: auto;，否则放大后失真或撑破圆角
移动端点按没效果？别只靠 :hover
iOS Safari 和多数安卓浏览器对 :hover 支持极弱，纯 CSS 悬停在触屏设备上基本无效。这不是兼容性问题，是交互模型根本不同。
- 简单补救：
.card:active { transform: scale(1.05); }，至少保证点按有反馈 - 更稳妥：用 JS 监听
touchstart添加is-hovered类，touchend清除，CSS 写.card.is-hovered规则 - 加媒体查询限制
:hover仅在鼠标设备生效：@media (hover: hover) and (pointer: fine) { .card:hover { ... } } - 别在卡片这种大面积区域强行模拟“悬停感”——用户点一下就触发，再点收起，体验错乱
缩放值、性能与模糊问题怎么选？
scale(1.03) 和 scale(1.12) 看似只差 0.09，但实际影响布局稳定性、文字清晰度和首帧卡顿。
- 推荐范围：
scale(1.03)～scale(1.05)（轻微可感知，适配 Bootstrap 栅格留白）；强调型卡片可用scale(1.08)～scale(1.12)，但需实测不同视口 - 避免非整数像素缩放（如
scale(1.033)），易触发 subpixel 渲染，导致文字边缘发虚 - 加
will-change: transform;到.card基础样式里，提前升层，缓解首次悬停卡顿 - 别用
width/height实现“放大”——触发重排，卡顿明显，且边缘锯齿
真正难的不是写出那三行 CSS，而是这张卡片在 xs 断点下放大会不会挤占相邻列？它的阴影有没有被 .container-fluid 的 overflow: hidden 截断？悬停后内部按钮的 z-index 还够不够浮在最上？这些不真机切几个视口，光看代码永远发现不了。
