应使用 transform: scale() 配合 transition 实现缩放动画，避免 zoom 或宽高修改；失效常见原因包括 transform 初始值未声明、父容器 overflow: hidden、inline 元素未设 display、行内样式覆盖复合变换，以及 position 离散属性无法过渡。
直接用 transform: scale() 配合 transition，别碰 zoom 或改 width/height——前者非标准且动画不可控，后者会触发重排、模糊圆角、失真。
为什么 transition: transform 0.2s 没反应？
常见失效不是代码写错，而是状态没对齐或样式被覆盖：
-
transform初始值没显式声明：比如只写了.card:hover { transform: scale(1.3); }，但基础样式里没设transform: scale(1)，浏览器可能从none插值，导致跳变或不动 - 父容器有
overflow: hidden，缩放后元素超出被裁，看着像“没动”——临时加overflow: visible测试即可确认 - 元素是
<span>这类 inline 元素，默认不支持transform，需加display: inline-block或display: block - JS 动态设置时用了
el.style.transform = 'scale(1.2)'，但 CSS 里原本有transform: rotate(5deg)，行内样式会覆盖整个transform值，旋转就丢了
点击缩放全屏怎么避免 position 切换失效？
很多人想点一下让卡片“弹出来占满屏幕”，结果用 position: relative → fixed 加 transition: all，发现毫无动画——因为 position 是离散属性，浏览器无法插值。
正确做法是全程保持 position: relative（或 absolute），只动 transform：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 初始状态：设
transform: scale(1) translate(0, 0)，transform-origin: center - 激活状态：用
transform: scale(2.5) translate(-20%, -20%)模拟放大+居中，再配合z-index提层 - 必须把整条
transform值作为过渡目标，不能只写transition: scale 0.3s——要写transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)
scale 缩放原点不对，怎么调？
scale() 默认以元素中心为基点，但按钮悬停常要“从左上角展开”，图片预览可能要“从点击点放大”。这时必须配 transform-origin：
- 固定位置：
transform-origin: top left（左上）、bottom right（右下） - 坐标值：
transform-origin: 20px 30px或transform-origin: 25% 75% - JS 动态计算点击点：
el.style.transformOrigin = `${x}px ${y}px`，再设scale()，就能实现“点击哪就从哪放大” - 注意：如果元素用了
transform: scale() rotate()等复合变换，transform-origin会影响所有变换的参考点，不是只作用于scale
真正难的不是写对那两行 CSS，而是在嵌套布局、响应式断点、滚动容器里维持缩放行为稳定——transform-origin 的百分比值在 flex 容器中可能表现异常，scale() 在 will-change: transform 未生效的 iOS Safari 上容易掉帧。这些细节不跑真机测几轮根本发现不了。
