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