transform: scaleY() 能拉伸文字高度，但需配合 display、line-height 和 transform-origin 调整；内联元素须设为 inline-block 或 block 才生效；默认缩放原点在中心，易致错位，推荐用 bottom center 或 top center；多行文本需固定容器和反向调节 line-height；旧版 Safari 和 IE 存在兼容问题，建议降级使用 font-size。
transform: scaleY() 能直接拉伸文字高度，但默认会连带影响行高、基线和换行行为——不是简单设个值就完事，得配合 display、line-height 和 transform-origin 一起调。
scaleY() 拉伸后文字“变矮”或“消失”？检查 display 类型
常见错误是给 <p> 或 <span> 直接加 transform: scaleY(2)，结果没变化甚至内容错位。这是因为内联元素（如 <span>）对 transform 的渲染支持不稳定，尤其在旧版 Safari 和某些移动端 WebView 中。
- 必须将目标元素设为
display: inline-block或block，否则scaleY可能被忽略或计算异常 - 避免用
display: flex或display: grid直接包裹被拉伸的文本——flex item 的基线对齐逻辑会干扰scaleY视觉效果 - 若需保留内联语义，可用
<span style="display: inline-block">包一层再应用scaleY
拉伸后文字上下错位？调整 transform-origin 是关键
scaleY() 默认以元素中心为缩放原点，所以 scaleY(2) 会让文字向上向下各拉伸 50%，视觉上像“从中间撑开”，导致整体位置偏移。实际项目中更常用的是“底部锚定”或“顶部锚定”拉伸。
-
transform-origin: bottom center→ 文字从底部向上拉伸，适合按钮标签、进度条数值等场景 -
transform-origin: top center→ 从顶部向下拉伸，常用于悬停展开式标题 - 慎用
transform-origin: 0 0（左上角），它在不同字体度量下容易因 ascent/descent 差异导致错位 - 不要混用百分比和像素单位，比如
transform-origin: 50% 10px，浏览器解析不一致
多行文本拉伸后换行混乱？别让 scaleY 影响 layout flow
scaleY() 是纯视觉变换，不改变盒模型尺寸。这意味着：拉伸后的文字仍按原始高度参与行高计算，极易引发重叠、截断或空白间隙。
- 单行文本最安全；多行务必用固定容器包裹，例如
<div style="height: 2em; overflow: hidden"> - 显式设置
line-height: 1或line-height: 0.5（根据缩放比例反向调节），避免原始行高干扰 - 禁用
white-space: nowrap—— 它会让拉伸后的宽度过大而撑破父容器 - 如果需要保持可读性（比如放大数字），建议优先用
font-size+line-height组合，而非scaleY
IE 和老版本 Safari 不支持？降级方案要提前埋好
transform: scaleY() 在 IE9+ 和 Safari 6+ 均支持，但 Safari ≤13.1 对 transform-origin 在 inline 元素上的处理有偏差，且所有旧引擎都不支持对伪元素（如 ::before）应用 scaleY。
立即学习“前端免费学习笔记（深入）”；
- 兼容 IE9–11：可用
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)模拟垂直翻转，但无法做非整数倍拉伸 - 真正需要兼容老 Safari 的场景，建议用
font-size替代scaleY，并用vertical-align微调对齐 - 注意：CSS 自定义属性（
--scale-y）不能直接用于scaleY()值，必须通过 JS 注入或预编译
scaleY() 看似简单，实则牵一发而动全身——它改的是渲染层，不是布局层。最容易被忽略的是：拉伸后的文字依然按原始尺寸参与 line-height 计算，而多数人只盯着 transform 那一行代码。 
