应使用 transform: scale() 配合 transition 或 @keyframes 实现缩放动画，避免 width/height 导致重排、失真和卡顿；需注意 transform-origin、合并变换值、状态管理及 Canvas/Three.js/SVG 的特殊约束。
直接用 transform: scale() 配合 transition 或 @keyframes，别碰 width/height——后者会重排、失真、卡顿，且圆角、阴影、边框全变形。
为什么不能用 width/height 做缩放动画
浏览器对 width 和 height 的变更必须重新计算布局（reflow），尤其是当元素有 border-radius、box-shadow 或子元素依赖其尺寸时，缩放过程会出现撕裂、模糊或错位。
-
scale()只触发重绘（repaint），走 GPU 加速路径，性能高、边缘锐利 - 用
width: 50%模拟“缩小一半”，实际是盒模型压缩，文字行高、内边距比例全乱，不是等比缩放 - 过渡
font-size+width更糟：文字缩放不均匀，line-height 不同步，可访问性直接崩
transition 实现 hover 缩放的坑点
常见失效不是写错了，而是没理解 transform 是“覆盖式”属性：CSS 里写了 rotate(10deg)，JS 再设 el.style.transform = 'scale(1.3)'，旋转就丢了。
- 必须把所有 transform 操作合并写：
transform: rotate(10deg) scale(1.3) -
transition必须作用于整个transform，不能只写transition: scale 0.3s（无效） - 缩放中心默认是元素左上角，要居中缩放得加
transform-origin: center - 移动端需确保
viewport允许用户手势缩放（user-scalable=yes），否则双指缩放被拦截
JavaScript 动态控制 scale 的正确姿势
直接赋值 el.style.transform 容易覆盖已有变换；用 getComputedStyle 读取再拼接又慢又不可靠。稳妥做法是维护一个状态对象，每次完整生成 transform 字符串。
立即学习“前端免费学习笔记（深入）”；
- 不要：
el.style.transform += ' scale(1.2)'（会重复叠加、格式错乱） - 推荐：
el.style.transform = `translate(${x}px, ${y}px) rotate(${r}deg) scale(${s})` - 如果只是单纯 toggle 缩放，用 class 切换更干净：
el.classList.toggle('is-zoomed')，CSS 里定义.is-zoomed { transform: scale(1.4); } - 需要动画曲线控制（比如缓入缓出）？用
animation-timing-function: cubic-bezier(.22,.61,.36,1)，别依赖 JS 计算帧
Three.js / Canvas / SVG 中缩放动画的特殊约束
这些场景下，对外层 DOM 元素做 scale() 是自欺欺人：Canvas 像素拉伸、SVG 渲染错位、Three.js 模型光照和阴影全部偏移。
- Three.js 必须改
model.scale.set(x, y, z)，且每次更新后调用model.updateMatrixWorld() - Canvas 2D 缩放前必
ctx.save()，画完必ctx.restore()，否则后续所有绘制都继承缩放 - SVG 缩放优先用
viewBox+preserveAspectRatio控制整体比例，避免用transform="scale()"包裹整个<svg>
真正难的不是写出 scale(1.5)，而是意识到缩放从来不是孤立操作——它和坐标系、渲染上下文、矩阵更新、事件热区全都耦合在一起。漏掉 transform-origin，元素飞走；忘了 updateMatrixWorld()，阴影悬空；没 save()/restore()，Canvas 绘图全乱。这些细节不处理，动画看起来就“不对劲”。
