使用transform: skewX()结合transition动画时页面跳转，如何解决？

问题背景 #

我为<h2>标题编写了如下样式，设置了hover状态下的过渡效果。但当文本应用skew变换时，页面在动画过程中出现轻微跳转。如何在不牺牲过渡/动画效果的前提下，避免这种尴尬的跳转？请在<h2>元素前添加另一个元素，测试hover时该元素出现的跳转情况：

.heading-secondary {
  font-size: 3.5rem;
  font-weight: 700;
  text-transform: uppercase;

  display: inline-block;
  background-image: linear-gradient(
    to right,
    $color-primary-light,
    $color-primary-dark
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  transition: all 0.5s ease-in-out;
  letter-spacing: 0.15rem;

  &:hover {
    letter-spacing: 0.2rem;
    transform: skewX(2deg) skewX(180deg);
  }
}

问题原因 #

跳转的核心原因是inline-block元素在skew变换+letter-spacing过渡时，浏览器的布局引擎对元素的物理占位边界计算出现了波动：skew会扭曲元素的视觉形态，但浏览器在过渡过程中无法平滑同步布局边界的变化，叠加字间距调整后就出现了肉眼可见的跳转。

解决方案 #

方案1：添加占位元素隔离布局（符合要求的测试方案）

通过在<h2>前添加一个同级占位元素，让它承担固定布局占位的角色，把标题的动画限制在自身范围内，不影响整体布局：

HTML结构

<span class="heading-placeholder"></span>
<h2 class="heading-secondary">示例标题文本</h2>

CSS修改

// 占位元素：和标题初始尺寸匹配，固定布局位置
.heading-placeholder {
  display: inline-block;
  vertical-align: middle;
  // 匹配标题的字体高度，宽度根据标题文本预估或用JS动态设置
  height: 3.5rem;
  min-width: fit-content;
  // 临时加背景色方便测试：background: #f0f0f0;
}

.heading-secondary {
  // 保留原有样式，新增以下属性
  position: relative;
  left: 0;
  transform-origin: left center; // 固定变换原点，避免偏移
  white-space: nowrap; // 防止文本换行干扰尺寸计算

  &:hover {
    // 注意：原代码中skewX(2deg) + skewX(180deg)等价于skewX(-178deg)，这应该是笔误，调整为合理的变换值
    transform: skewX(2deg);
  }
}

测试时，给占位元素加临时背景色就能看到：hover过程中占位元素的尺寸完全不变，标题的动画不会带动其他元素跳转。

方案2：无需额外元素的简化方案

如果不想添加额外元素，直接通过CSS固定标题的布局边界即可：

.heading-secondary {
  // 原有样式不变，新增：
  white-space: nowrap;
  transform-origin: left center;
  min-width: fit-content;
  // 可选：设置一个固定宽度（如果标题文本长度固定）
  // width: 20rem;
}

这个方案通过固定变换原点、强制文本不换行、锁定最小宽度，让浏览器明确元素的布局边界，避免过渡时重新计算导致的跳转。

内容的提问来源于stack exchange，提问作者Rishikesh Negi