使用 transition 结合 transform: scale() 可实现图片平滑缩放，通过 hover 触发；2. 推荐对 transform 应用过渡而非 width/height 以提升性能，注意父容器 overflow 可能导致裁剪问题。
在CSS中，可以通过 transition 结合 transform: scale() 实现图片的平滑放大缩小效果。关键在于定义状态变化时的过渡动画，并设置合适的触发条件（如hover）。
1. 基础HTML结构
假设有一个图片元素：
2. 使用 transform 和 transition 设置缩放动画
通过设置初始的 transform: scale(1)，并在:hover时改变缩放比例，配合transition实现动画：
样式代码如下：
.zoom-image {
transition: transform 0.3s ease;
cursor: pointer;
}
.zoom-image:hover {
transform: scale(1.2);
}
- transition: transform 0.3s ease 表示 transform 属性在变化时，用0.3秒的缓动动画完成
- transform: scale(1.2) 将图片放大到原始尺寸的1.2倍
- 鼠标移出时，会自动恢复原状，同样有动画效果
3. 支持缩小效果（可选）
如果希望默认显示小图，hover时放大，也可以反过来设置：
立即学习“前端免费学习笔记（深入）”；
.zoom-image {
transform: scale(0.8);
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.zoom-image:hover {
transform: scale(1);
}
4. 注意事项
- 推荐对 transform 属性添加 transition，而不是 width/height，因为 transform 性能更好
- 避免对 opacity 或 visibility 做 transform 过渡，不会生效
- 若父容器有限制溢出（overflow: hidden），注意放大后图片是否被裁剪
