transform对span等inline元素无效，因其默认生成inline box，不满足w3c规定的transformable element条件；需设display: inline-block或inline-flex才能激活独立盒模型并支持transform。
因为 span 默认是 display: inline，它不生成可 transform 的盒模型——浏览器直接忽略 transform，不是失效，是压根不处理。
transform 对 inline 元素根本不起作用
W3C 明确规定：transform 只适用于「可变换元素」（transformable element），其中必须满足：是 CSS 盒模型控制的元素，且属于 block-level 或 atomic inline-level（如 inline-block、inline-table）。而原生 span 是 display: inline，生成的是 inline box，不属于可变换范围。
你写 span { transform: scale(1.5); }，浏览器解析时会静默丢弃该声明，DevTools 里能看到 strike-through 的灰色样式，getComputedStyle(el).transform 返回 none，不是计算错误，是根本没进渲染管线。
- 加
display: inline-block后立刻生效，是因为它升级为 atomic inline-level box，获得独立盒模型边界 -
display: inline-flex也行，但 IE11 不支持，慎用 - 别试
display: block——它会强制换行，破坏内联流语义
为什么看起来“像有效果”，其实是错觉
某些情况下，比如 span 套在 div 里，又加了 vertical-align: middle 或 line-height，再叠加 transform: translateY()，你可能看到文字微移。但这不是 transform 在起作用，而是 line-height 或 vertical-align 重排了行框（line box），transform 依然被忽略。
- 用 DevTools 的「Computed」面板检查，确认
transform是否显示为 active（非 strikethrough） - 用
el.getBoundingClientRect()测尺寸，如果 width/height 没变且 left/top 与未写 transform 时一致，说明 transform 没触发 - 想验证是否真被忽略：给同一
span同时加transform: scale(2)和background: red，你会发现背景没放大，证明视觉层根本没走 transform 流程
替代方案：不改 display 也能“动”
如果你不能改 span 的 display 类型（比如受限于框架或组件封装），可用语义等价但兼容性更好的方式模拟位移或缩放：
- 用
position: relative+top/left替代translate()（注意：这会参与布局，可能影响兄弟元素） - 用
font-size+em单位控制文本缩放，配合line-height: 1防止行高失控 - 用
padding-left/padding-right模拟水平位移（仅限小偏移，且 padding 不影响垂直流） - 用
transform: translateZ(0)强制创建渲染层，虽不改变占位，但可触发 GPU 加速，对动画性能有帮助（但依然不解决 inline 不支持 transform 的本质问题）
真正要注意的点是：不要在调试时假设「写了就是用了」。inline 元素的 transform 是规范级静默失效，不是浏览器 bug，也不是 CSS 优先级问题——它连进入 layout 阶段的资格都没有。查不到效果，第一反应不该是调 z-index 或 will-change，而是先看 display 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
