应设置 transform-origin: center 实现居中放大，配合 overflow: hidden 防溢出、flex-shrink: 0 防跳动、touch-action: manipulation 稳定移动端点击态，并始终对卡片容器而非 img 应用 transform。
卡片悬浮时 transform 放大导致偏移怎么办
直接写 transform: scale(1.05) 会让卡片以左上角为原点缩放，视觉上“往右下跑”，根本不是居中放大。这不是 bug，是 transform 的默认行为——缩放中心点默认在元素左上角（origin 为 0 0）。
- 必须显式设置
transform-origin: center，让缩放围绕中心点发生 - 如果卡片用了
display: inline-block，还要确认父容器没有 text-align: left 干扰；建议父容器统一设text-align: center或用 flex 布局 - 避免同时写
scale()和translateY()却没指定 origin，比如transform: translateY(-4px) scale(1.05)仍会偏移——顺序不影响 origin 默认值，必须单独声明
flex 布局下卡片放大后位置跳动怎么稳住
当卡片放在 display: flex 容器里，transform: scale() 可能触发 flex 项的重新对齐，尤其在 justify-content: center 下，放大瞬间因宽度变化导致“抖一下”。这不是渲染错误，而是 flex 引擎在重算主轴尺寸。
- 给卡片加
flex-shrink: 0，防止它被 flex 容器压缩或拉伸 - 放大前就预留空间：比如卡片原始宽高设为固定值（如
width: 300px; height: 200px;），而非百分比或fit-content - 慎用
align-items: center+transform: scale()组合——垂直方向也可能微跳，可改用margin: auto或绝对定位 +top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.05)
图片卡片放大时内容溢出或裁剪
很多开发者把 scale() 加在 <img> 标签本身，结果图片撑破容器、圆角失效、阴影被截断。根本原因是 <img> 没有独立的 overflow 控制能力，且默认 inline 行内行为不稳定。
- 永远对卡片容器（
<div class="card">）应用transform，而不是<img> - 容器必须设
overflow: hidden，否则放大后图片边缘会露出来 -
<img>要设display: block; width: 100%; height: auto;，确保它随容器缩放，不破坏比例 - 如果用了
border-radius，只设在容器上，别设在 img 上——否则放大后圆角半径不变，视觉上变“尖”
移动端点击态放大如何不偏移
纯 :hover 在 iOS/Android 上基本无效，改用 :active 后，点击瞬间卡片放大却“向左上弹”，是因为触摸事件触发时页面可能有滚动或焦点跳转，导致视口偏移。
立即学习“前端免费学习笔记（深入）”；
- 给卡片容器加
touch-action: manipulation，减少延迟并稳定 touch 响应区域 -
:active状态下避免用scale(1.05)，改用更克制的scale(1.02)+transform: translateY(-2px) - 务必加
transition: transform 0.15s ease-out（比 hover 更短），否则点击反馈显得迟钝 - 不要依赖
focus-within实现“点击后保持放大”，它在 Safari 移动端支持不稳定；稳妥做法是 JS 切换is-active类，并监听touchend清除
transform-origin 和 overflow: hidden 这两个属性漏掉任何一个，效果就废一半。 
