直接加transform: scale(1.05)没反应，是因为缺少transition属性；必须在.card基础类中声明transition: transform 0.3s ease，否则仅状态切换、无平滑动画。
为什么直接加 transform: scale(1.05) 没反应
Bootstrap 卡片（.card）默认没有设置 transform-origin 和 transition，光写 transform: scale(1.05) 不会触发平滑过渡，只会瞬间跳变。必须显式声明过渡属性和持续时间。
- 缺
transition: transform 0.3s ease;—— 动画不会发生，只有状态切换 - 父容器有
overflow: hidden（如某些 Bootstrap 版本的.card或.card-body）—— 放大后内容被裁切 - 使用了
!important覆盖了 Bootstrap 的默认 transition —— 导致自定义失效
正确写法：给 .card 添加 hover transition 规则
推荐在自定义 CSS 文件末尾或 <style></style> 块中添加，确保优先级高于 Bootstrap 默认样式：
.card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: scale(1.03);
box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
-
transform和box-shadow分开写进同一transition值，可同时动画，避免抖动 - 缩放建议控制在
1.02–1.05之间，过大易导致布局偏移或文字模糊 - 不要用
scale(1.03)配合position: relative+top等位移 —— 多重变换可能触发重排
解决卡片内容溢出或错位问题
悬停放大后，卡片可能撑破父容器、文字换行异常，或内部按钮/图片位置偏移。根本原因是 transform 不影响文档流，但视觉尺寸变大后与周围元素产生视觉冲突。
- 给
.card加overflow: visible;（覆盖 Bootstrap 的hidden） - 若卡片在
.row/.col中，放大时可能挤占相邻列 —— 改用transform: scale(1.03)+z-index: 2提升层级，而非修改 margin - 内部图片未设
max-width: 100%或height: auto—— 悬停时等比失真，需补全响应式约束
兼容性与移动端注意事项
Chrome/Firefox/Edge 均支持 transform + transition，但 Safari 旧版本（≤13.1）对 scale() 在 flex 容器中的表现偶有渲染异常。
- 移动端触摸设备无
:hover，iOS Safari 默认不触发 —— 如需反馈，得配合@media (hover: hover)做条件启用 - 避免在
.card上同时加will-change: transform—— 可能引发 iOS 页面闪烁或滚动卡顿 - 如果项目用了 Bootstrap 5.3+，确认没开启
$enable-reduced-motionSass 变量，否则动画会被系统偏好强制禁用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
