最稳方案是用 transform: scale() + transition 配合 class 切换；须包裹独立容器、显式设 transform-origin、避免在 body 上缩放，以防滚动错乱、定位偏移和焦点异常。
别用 zoom，直接用 transform: scale() + transition 配合 class 切换，这是目前最稳、兼容性最好、不触发重排的方案。
为什么不能在 body 上直接缩放
对 应用 transform: scale() 看似省事，但会埋三个坑：
- 滚动条位置错乱：
document.body.scrollHeight不更新，window.scrollTo()失效 - 绝对定位元素偏移：所有
position: absolute子元素的top/left仍按原始尺寸计算，视觉上“飘走” - 表单焦点异常：Safari iOS 下点击
<input>，软键盘弹出位置可能错位
正确做法是把要缩放的内容包进一个独立容器，比如 <div class="module-wrapper">，只对这个 wrapper 缩放。
<h3>缩放中心点必须显式设 <code>transform-origin
默认 transform-origin: 50% 50%（居中），但模块级缩放常需要不同锚点：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 想模拟模态框从视口中心弹出 → 加
transform-origin: center center - 想实现“推入式”路由切换效果 → 用
transform-origin: top left，再配合position: fixed和inset: 0避免滚动干扰 - 缩放后顶部/左侧被裁？先临时把父容器
overflow: hidden改成visible调试，确认是 origin 还是 overflow 导致
用 class 控制状态比内联 style 更可靠
硬编码 element.style.transform = 'scale(1.2)' 容易和 JS 其他逻辑冲突（比如动画中途被 reset），也难维护。推荐用 class：
- HTML 中加统一 class：
<div class="module-wrapper"> <li>CSS 定义两态：<code>.module-wrapper { transform: scale(1); transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }和.module-wrapper.is-zoomed { transform: scale(1.15); } - JS 只做一件事：
el.classList.toggle('is-zoomed')，干净、可预测、支持快速连点 - 父容器设置了
overflow: hidden，缩放后内容被裁 —— 临时加overflow: visible测试 - 元素是
<span></span>或其他 inline 元素，默认不支持transform—— 加display: inline-block或display: block - 用了
transform: scale(1.5) rotate(10deg)，但只对scale做了transition—— 必须写成transition: transform 0.3s，否则整个 transform 不会过渡 - JS 动态设置时写了
el.style.transform = 'scale(1.2)'，但之前 CSS 里有transform: rotate(5deg)—— 行内样式会覆盖 CSS 中的transform，导致旋转丢失
常见失效原因和修复
写完没反应？大概率掉进这几个坑：
真正容易被忽略的是：缩放不是“动效问题”，而是“布局状态管理问题”。一旦涉及多个模块、嵌套缩放或与第三方 UI 库共存，origin、wrapper 层级、transition 触发时机这三者稍有错位，就会出现边缘裁切、定位漂移或动画卡顿——这些都不是加个 will-change: transform 就能解决的。
