JavaScript通过设置元素style.transform属性，结合scale()和rotate()函数实现缩放与旋转；需注意变换顺序、单位规范、叠加策略及transform-origin中心点控制。
JavaScript DOM 操作本身不直接提供“缩放”或“旋转”方法，而是通过修改元素的 style.transform 属性，配合 CSS 的 scale() 和 rotate() 函数来实现视觉上的缩放与旋转。
设置 transform 属性实现缩放和旋转
所有现代浏览器都支持 transform，它接受一个变换函数列表（空格分隔），例如 "scale(1.5) rotate(45deg)"。注意：顺序很重要——先缩放再旋转，和先旋转再缩放，结果不同。
- 缩放用
scale(sx)（等比）或scale(sx, sy)（非等比），值为数字，1表示原始大小，0.5缩小一半，2放大两倍 - 旋转用
rotate(angle)，单位必须带deg（角度）、rad（弧度）或turn（圈数），如"rotate(90deg)"、"rotate(0.5turn)" - 推荐统一使用
transform单一属性设置多个效果，避免覆盖已有变换（比如不要同时设style.scale和style.rotate，它们是实验性属性且兼容性差）
用 JavaScript 动态更新 transform
直接操作 element.style.transform 是最常用方式。注意要拼接完整字符串，并保留原有变换（如果需要叠加）。
- 基础写法：
elem.style.transform = "scale(1.3) rotate(-15deg)" - 叠加当前变换（较安全）：
const current = window.getComputedStyle(elem).transform;<br> elem.style.transform = current + " scale(1.1) rotate(5deg)";
（但注意getComputedStyle返回的是矩阵，拼接易出错；更稳妥做法是维护一个状态对象记录 scale/rotate 值，每次重算） - 推荐封装函数，例如：
function setTransform(el, scale = 1, rotate = 0) {<br> el.style.transform = `scale(${scale}) rotate(${rotate}deg)`;<br>}
结合事件实现交互式缩放/旋转
常见于图片查看器、拖拽编辑器等场景。可监听按钮点击、滚轮（缩放）、长按+拖动（旋转）等事件。
立即学习“Java免费学习笔记（深入）”；
- 滚轮缩放示例：
elem.addEventListener("wheel", (e) => {<br> e.preventDefault();<br> const delta = e.deltaY > 0 ? 0.9 : 1.1;<br> currentScale *= delta;<br> setTransform(elem, currentScale, currentRotate);<br>}); - 点击按钮旋转：
document.getElementById("rotateBtn").onclick = () => {<br> currentRotate = (currentRotate + 90) % 360;<br> setTransform(elem, currentScale, currentRotate);<br>}; - 注意添加
transform-origin控制变换中心点（默认是元素中心），例如：elem.style.transformOrigin = "top left"，否则旋转可能偏离预期位置
注意事项与兼容性
虽然 transform 在主流浏览器中支持良好，但仍有细节需留意：
- 旧版 Safari（-webkit-transform 前缀，现代项目一般无需手动加，可用 PostCSS 或忽略老版本
-
transform不触发重排（reflow），只触发重绘（repaint），性能优于修改width/height或left/top - 若元素有
position: static，transform仍生效；但某些布局（如 flex 子项）中，transform 可能影响对齐行为，建议测试 - 动画过渡建议用 CSS
transition而非 JS 定时器：在 CSS 中写transition: transform 0.2s ease，JS 只负责改值，更流畅
