用 transform: scale() 配合 transition 实现平滑缩小需在默认状态写 transition: transform 0.3s ease，hover 状态显式设 transform: scale(0.9)，避免重排、处理模糊、适配移动端并真机验证。
用 transform: scale() 配合 transition 实现平滑缩小
直接给元素加 transform: scale(0.9) 不会动，必须配合 transition 声明过渡属性和时长。关键不是“能不能缩”，而是“缩得是否自然”——transform 必须作用在悬停状态（:hover），且初始状态不能缺省为 scale(1)，否则部分浏览器可能跳变。
-
transition要写在**默认状态**（非 hover）上，比如transition: transform 0.3s ease; -
transform的值必须在:hover中显式设置，如transform: scale(0.85); - 避免同时过渡
width/height，它们会触发重排，而transform只触发重绘，性能更好 - 如果父容器有
overflow: hidden，缩小后边缘可能被裁切，需检查容器尺寸或留白
为什么 scale() 缩小后文字模糊？
这是硬件加速与亚像素渲染的常见副作用。当 scale 值不是整数倍（比如 0.87），浏览器会用插值算法渲染，导致字体边缘发虚。尤其在 Chrome 和 Safari 上明显。
- 优先使用「能被 100 整除」的小数，如
0.8、0.9，避开0.83、0.87这类值 - 可强制开启 GPU 加速：加
transform: translateZ(0);到默认状态，但注意这会新建图层，慎用于大量元素 - 对文字敏感的场景（如按钮文案），改用
font-size缩放 +transition: font-size，虽略慢但更清晰
想让缩小的同时带位移或旋转？
transform 支持函数组合，顺序很重要：CSS 里靠前的变换先执行，所以 scale(0.9) rotate(-2deg) 和 rotate(-2deg) scale(0.9) 效果不同——后者是先转再缩，旋转中心点也会跟着缩放变化。
