直接用 transform: scale() 配合 transition 即可实现高性能缩放动画，无需 js 或修改 html；因 width/height 动画触发重排，而 transform 由 gpu 加速且不干扰布局。
直接用 transform: scale() 配合 transition 就能实现，不需要 JS，也不用改 HTML 结构。
为什么不用 width/height 动画？
改 width 或 height 会触发重排（reflow），影响相邻元素布局，还可能造成卡顿；而 transform 属于合成层操作，浏览器会走 GPU 加速路径，性能更稳。
- 缩放时若没设
transform-origin，默认以中心点缩放，容易出现“抖动”或偏移 - 如果图片父容器是
flex或grid，用scale()不会影响其他子项的尺寸和位置 - 在 Safari 旧版本中，
scale(1)和scale(1.0)渲染行为不一致，建议统一写带小数点的形式（如scale(1.0)）
基础写法与关键参数
最简可用版本：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
.img-hover {
transition: transform 0.3s ease;
}
.img-hover:hover {
transform: scale(1.2);
}
-
transition必须写在非 hover 状态下，否则第一次悬停无动画 -
ease比linear更自然；想更轻快可用ease-out，想更柔和可用ease-in-out - 放大倍数别超过
scale(1.5)，否则在高 DPI 屏上可能糊，且易遮挡邻近内容
避免图片溢出容器或遮挡兄弟元素
常见问题：放大后图片“撑破”父容器，或盖住旁边卡片。解决方法是限制渲染层级和裁剪范围：
- 给图片父容器加
overflow: hidden，强制裁剪超出部分 - 给图片本身加
transform-origin: center（显式声明，避免某些浏览器默认值差异） - 如果父容器是
position: relative，图片设position: static（默认即可），不要乱加absolute，否则脱离文档流后缩放位置难控 - 在 flex 布局中，确保
.item类有flex-shrink: 0，防止放大时被压缩
真正要注意的其实是 transform-origin 的隐式取值和 overflow 的配合——这两处不设好，效果看着就“毛边”或“跳动”，但错误信息不会报出来，只能靠肉眼观察。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
