卡片缩放高亮需设transform-origin: center center防偏移；角标用反向scale抵消；禁用width/height过渡保性能；响应式分段设scale值；检查pointer-events/overflow/z-index确保hover生效；加will-change防文字模糊。
transition 用 scale 实现卡片缩放高亮，必须加 transform-origin
直接写 transition: transform 0.3s + transform: scale(1.05) 很容易发现高亮时卡片往上或往左“跳”，不是居中放大。这是因为默认 transform-origin 是 50% 50%（中心），但很多卡片容器没设宽高或用了 flex 自适应，浏览器实际计算的“中心点”会偏移。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给卡片根元素显式设置
transform-origin: center center，别依赖默认值 - 如果卡片内部有绝对定位元素（比如“NEW”角标），缩放后它们也会跟着变大——这时得在角标上反向加
transform: scale(0.95)抵消 - 避免对
width或height做 transition，它会触发重排，而transform只触发重绘，性能好得多
响应式下 scale 值不能写死，要用媒体查询分段控制
在手机上放缩 1.05 倍可能刚好看，但在 iPad 上就显得突兀；反过来，桌面端用 1.02 倍又几乎看不出反馈。硬写一个 scale(1.03) 全局生效，等于放弃响应式交互质量。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
@media (max-width: 768px)单独设移动端scale(1.04) - 平板区间（769px–1024px）用
scale(1.06)，补足手指点击的视觉确认感 - 桌面端（≥1025px）可上到
scale(1.08)，但别超过 1.1，否则边缘裁剪或遮挡相邻卡片 - 所有 media query 中，
transition的时长保持一致（推荐0.25s），避免节奏混乱
:hover 无效？检查是否被 pointer-events: none 或父级 overflow 阻断
卡片加了 transition 和 hover 样式却没反应，90% 不是 CSS 写错，而是被更上层的样式静默拦截了。典型现象：鼠标悬停时 cursor 不变、开发者工具里 :hover 状态根本不亮起。
常见错误现象：
- 卡片外层包裹了
pointer-events: none的蒙层（比如为了实现点击穿透） - 父容器设置了
overflow: hidden且卡片有transform: scale()，导致渲染层被裁切，hover 区域实际失效 - 卡片用了
position: absolute但 z-index 太低，被其他元素盖住（哪怕视觉上没遮挡）
快速验证：临时加一句 outline: 1px solid red 到卡片上，看 hover 时红框是否准确套住内容区域。
scale 缩放引发文字模糊？优先启用 will-change
部分 Chrome / Safari 在非整数 scale（如 1.05）下会对字体做亚像素渲染，导致悬停瞬间文字发虚，松开又恢复清晰。这不是 bug，是 GPU 合成策略切换造成的视觉暂态。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在卡片选择器上加
will-change: transform，提前告诉浏览器这个元素会动 - 不要滥用：
will-change会强制创建新图层，过多使用增加内存开销 - 如果项目已用
backface-visibility: hidden做硬件加速，它和will-change效果接近，二选一即可 - 纯文字卡片可考虑改用
filter: brightness(1.05)替代 scale，规避变形模糊，但失去空间感
scale 过渡看着简单，真正要稳，得盯住 origin、响应断点、事件链路、渲染层这四点。漏掉任何一环，用户滑过去那一秒的卡顿或错位，就是体验断点。
