根本原因是 transform: scale() 默认以左上角为原点缩放，而预期是居中放大；需设 transform-origin: center、避免父容器 overflow: hidden、慎用 border 而改用 box-shadow，配合 will-change: transform 和整数缩放比优化渲染。
hover 放大时盒子突然位移或抖动
根本原因是 transform: scale() 默认以元素左上角为原点缩放，而多数人期望的是“居中放大”。一旦盒子有边框、内边距或父容器有 overflow: hidden，缩放后边缘像素对齐偏差就会肉眼可见地跳动。
- 加
transform-origin: center强制缩放中心归中 - 确保父容器没有意外的
overflow: hidden（尤其在 flex 或 grid 容器里） - 如果盒子本身有
border，放大后边框粗细会按比例变厚，视觉上像“弹出”，可改用box-shadow模拟边框来规避
scale 放大后文字模糊或锯齿严重
这是浏览器对 sub-pixel 渲染和 GPU 加速的处理差异导致的，尤其在 Chrome 和 Safari 下明显。不是 bug，但影响体验。
- 给被放大的元素加
will-change: transform，提前提示浏览器启用硬件加速 - 避免用小数缩放比，比如
scale(1.05)，优先选scale(1.1)或scale(1.2)这类能被整数像素较好映射的值 - 如果文字模糊仍明显，可加
-webkit-font-smoothing: antialiased（仅限 WebKit），但注意这会影响整体字体渲染风格
移动端 hover 不触发，或触发延迟高
手机浏览器根本没有 hover 概念，所谓“hover”其实是模拟的：第一次点击触发 :hover，第二次才真正跳转或操作。用户会觉得卡顿或误操作。
- 不要单独依赖
:hover实现核心交互，必须搭配:active或 JS 的touchstart/touchend - 在 CSS 里加
@media (hover: hover) and (pointer: fine)做精准设备判断，只给鼠标设备启用 scale 动画 - 若必须兼容，用
transform: scale(1.05)配合transition: transform 0.2s ease-out，别超过 0.25s，否则移动端响应更滞后
与其他 transform 属性（如 rotate、translate）混用失效
transform 是单值属性，后写的会覆盖前写的。比如先写 translateY(-10px)，再写 scale(1.2)，结果只有 scale 生效。
- 必须合并写法：
transform: translateY(-10px) scale(1.2) - 顺序很重要：scale 在前会先缩放再位移，数值是缩放后的坐标；scale 在后则是先位移再缩放，更符合直觉
- 如果用 JS 动态修改，别直接改
style.transform，而是读取当前值、解析、合并、再写回，否则容易丢掉原有变换
最常被忽略的是 transform-origin 的默认值和父元素 overflow 的隐式裁剪——这两处不调，哪怕代码全对，效果也大概率不对。实际项目里建议先写死 transform-origin: center 和检查外层容器，再调 scale 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
