直接用transform: scale()会导致卡片内容溢出，是因为Bootstrap 5的.card默认未设overflow: hidden，无法裁剪放大后超出边界的图片、文字等子元素；必须显式添加overflow: hidden才能生效。
为什么直接用 transform: scale() 会导致卡片内容溢出
Bootstrap 5 的 .card 默认没有设置 overflow: hidden，图片放大时会突破卡片边界，文字、按钮等子元素也可能被遮挡或错位。这不是图片本身的问题，而是父容器未定义裁剪边界——必须显式加 overflow: hidden 才能生效。
常见错误是只给 .card-img-top 加 transition 和 transform，却忽略卡片容器的裁剪控制。
实操建议：
- 在卡片最外层（即
<div class="card">）添加style="overflow: hidden;"，或通过自定义类统一控制 - 避免对
.card-body或其他子容器设overflow: hidden，否则可能意外裁掉文字或按钮 - 若使用
border-radius，需确保圆角值与overflow: hidden同时作用于同一元素，否则圆角失效
如何让图片悬浮放大但保持宽高比不拉伸
Bootstrap 5 的 .card-img-top 默认是响应式图片（width: 100%，height: auto），但直接加 transform: scale(1.1) 会按原尺寸缩放，可能造成像素模糊或边缘锯齿。关键是要让缩放以图片中心为原点，且不触发重排。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 给图片加
style="object-fit: cover; width: 100%; height: 200px;"（高度固定，避免高度塌陷） - 悬停时用
transform: scale(1.1) translateZ(0)，其中translateZ(0)强制启用 GPU 加速，减少抖动 - 务必设置
transform-origin: center，否则默认从左上角缩放，视觉偏移明显 - 过渡动画加在图片上：
transition: transform 0.3s ease-in-out，不要加在父卡片上
兼容性问题：Safari 下 transform 裁剪失效怎么办
Safari（尤其是 iOS 15–16）对 overflow: hidden + transform 组合支持不稳定，可能出现裁剪失效或滚动条闪现。这不是 Bootstrap 的 bug，而是 WebKit 渲染层的已知限制。
实操建议：
- 在卡片容器上补一句
style="-webkit-mask-image: url(data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='100'%20viewBox='0%200%20100%20100'%3E%3Crect%20width='100'%20height='100'%20fill='black'/%3E%3C/svg%3E);"，强制创建蒙版层 - 或者降级方案：不用
transform，改用width/height动画 +overflow: hidden，虽然性能稍差但 100% 兼容 - 测试时务必在真机 Safari 上验证，模拟器有时不复现
如何避免文字层被放大图片盖住
卡片中图片在 .card-img-top，文字在 .card-body，结构上是兄弟关系。但一旦图片用了 transform，其 stacking context 会提升，容易覆盖下方文字——尤其当 .card-body 没有明确 position 或 z-index 时。
实操建议：
- 给
.card-body加style="position: relative; z-index: 2;"，确保它在图片图层之上 - 不要给图片设
z-index（transform元素的z-index行为不可靠） - 如果用了卡片标题（
.card-title），检查它是否被margin-bottom拉远导致视觉脱节，可微调margin值对齐
overflow: hidden，图片设 transform 和 transform-origin，文字容器设 position: relative。多一层 DOM 就多一分失控风险。 
