HTML5缩放依赖CSS transform: scale()，需配合transition或@keyframes实现动画；Canvas中须用ctx.scale()在绘图层缩放，避免CSS拉伸模糊。
用 transform: scale() 实现 HTML5 元素缩放
HTML5 本身不提供专门的“动画缩放”标签，缩放效果完全依赖 CSS 的 transform 属性。最直接、兼容性最好、性能最优的方式就是用 scale() 函数。
注意：必须作用在支持 transform 的元素上（几乎所有块级和行内替换元素都支持），且需配合 transition 或 @keyframes 才能产生动画效果，否则只是静态缩放。
-
scale(1)表示原始大小；scale(0.5)缩小为一半；scale(2)放大两倍 - 支持
scaleX()、scaleY()、scaleZ()独立控制各轴 - 缩放以元素中心点为原点——若要改原点，需配合
transform-origin，例如：transform-origin: top left - 不要用
width/height模拟缩放：会触发重排（reflow），性能差，且无法实现真·等比缩放（如带 border-radius 的圆角会变形）
给缩放加动画：用 transition 还是 @keyframes？
选哪个取决于交互逻辑：
- 用户触发的简单状态切换（比如 hover、点击展开/收起）→ 优先用
transition，代码少、易维护 - 需要循环播放、多阶段变化（比如弹跳入场、脉冲提示）→ 必须用
@keyframes+animation - 两者都依赖
transform，不能对width或font-size做 transition 来“假装”缩放，否则动画卡顿、失真
/* 示例：hover 缩放 */
.button {
transition: transform 0.2s ease;
}
.button:hover {
transform: scale(1.1);
}
<p>/<em> 示例：关键帧缩放动画 </em>/
@keyframes zoomIn {
from { transform: scale(0.8); opacity: 0.6; }
to { transform: scale(1); opacity: 1; }
}
.card {
animation: zoomIn 0.3s forwards;
}
scale() 常见失效原因和修复
写完没反应？大概率掉进这几个坑里：
立即学习“前端免费学习笔记（深入）”；
- 父容器设置了
overflow: hidden，而缩放后元素超出边界被裁剪——临时加overflow: visible测试，或调整transform-origin避免溢出 - 元素是
inline（如<span></span>），默认不支持transform——加display: inline-block或display: block - 用了
transform: scale(1.5) rotate(10deg)，但只对scale做了transition——必须把整个transform值作为过渡属性：transition: transform 0.3s - JS 动态设置时写了
el.style.transform = 'scale(1.2)'，但之前 CSS 里有transform: rotate(5deg)→ 行内样式会覆盖 CSS 中的 transform，导致旋转丢失。应合并写：el.style.transform = 'rotate(5deg) scale(1.2)'
Canvas 中实现缩放动画要绕开 DOM
如果目标是 Canvas 内部绘图内容缩放（比如放大一个图形、缩放整个 canvas 场景），就不能靠 CSS —— 因为 <canvas></canvas> 是位图容器，CSS 缩放只是拉伸像素，会模糊。
- 真正做法是在
draw()循环中用ctx.scale(x, y)控制绘图坐标系缩放 - 结合
requestAnimationFrame更新缩放系数，再清屏重绘 - 注意：
ctx.scale()影响后续所有绘图操作，记得用ctx.save()/ctx.restore()隔离作用域
let scale = 1;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.scale(scale, scale);
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 50, 50);
ctx.restore();
<p>scale += 0.01;
if (scale < 2) requestAnimationFrame(animate);
}缩放看着简单，但 DOM 层和 Canvas 层的实现逻辑完全不同，混用就会模糊或卡顿。关键不是“怎么写 scale”，而是“在哪一层缩放”——这个分界点，很多人调试半天才意识到。
