使用CSS transition与transform: scale可实现元素平滑缩放，原理是通过scale()改变尺寸并配合transition添加过渡动画，如:hover触发放大、transform-origin调整缩放原点，或JavaScript切换类实现点击交互，适用于按钮悬停、图片展示等场景，性能优且不触发重排。
使用CSS过渡（transition）与transform: scale可以实现元素平滑的放大缩小效果。这种方式性能好，不会触发重排，只涉及合成层的变化，适合用于按钮悬停、图片展示等交互场景。
1. 基本原理说明
CSS中的transform: scale()用于缩放元素尺寸，值大于1表示放大，小于1表示缩小。
搭配transition属性后，可以在状态变化时添加动画过渡，使缩放更自然。
2. 实现鼠标悬停放大效果
以下是一个常见的鼠标悬停放大示例：
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: transform 0.3s ease;
}
.box:hover {
transform: scale(1.2);
}
说明：
- 默认状态下设置transition控制transform属性的过渡时间与缓动函数
- 鼠标进入时，scale从默认的1变为1.2，元素放大为原大小的120%
立即学习“前端免费学习笔记（深入）”；
3. 控制缩放中心点
默认情况下，缩放以元素中心为原点。可通过transform-origin调整：
.box {
transform-origin: top left;
transition: transform 0.3s ease;
}
.box:hover {
transform: scale(1.2);
}
此时元素会以左上角为基准进行放大，页面其他内容可能会被挤压或偏移。
4. 配合点击事件切换大小
也可以用JavaScript控制类名切换，实现点击放大/还原：
.box {
width: 100px;
height: 100px;
background: #e74c3c;
transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.box.active {
transform: scale(1.5);
}
JavaScript部分：
document.querySelector('.box').addEventListener('click', function() {
this.classList.toggle('active');
});
使用cubic-bezier可自定义缓动曲线，让动画更细腻。
基本上就这些。合理使用transition和transform: scale，能轻松实现流畅的视觉反馈，提升用户体验。注意避免在低性能设备上对大量元素同时做复杂动画。
