将鼠标悬停在元素上会出现转换转换故障

如何阻止每个字母在底部悬停时出现毛刺？发生这种情况是因为字母改变了位置，所以它正在快速切换其过渡，但如何更好地编码，以便过渡将是平滑的？https://codepen.io/anon/pen/XBmPMV

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

#text {
  cursor: pointer;
  font-size: 7em;
  font-weight: 700;
  text-transform: uppercase;
}

#text span {
  display: inline-block;
  transition: transform 200ms;
}

#text span:hover {
  transform: translateY(-1em) rotate(10deg) scale(1.5);
}

<div class="container">
  <div id="text">
    <span>A</span>
    <span>B</span>
    <span>C</span>
    <span>D</span>
    <span>E</span>
    <span>F</span>
  </div>
</div>

---

解决方案

考虑一个将使悬停区域更大的伪元素：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

#text {
  cursor: pointer;
  font-size: 7em;
  font-weight: 700;
  text-transform: uppercase;
}

span {
  display: inline-block;
  transition: transform 200ms;
  position: relative;
}

span:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
}

span:hover {
  transform: translateY(-1em) rotate(10deg) scale(1.5);
}

span:hover::before {
  transform:rotate(-10deg);
  height: calc(100% + 0.5em);
}

<div class="container">
  <div id="text">
    <span>A</span>
    <span>B</span>
    <span>C</span>
    <span>D</span>
    <span>E</span>
    <span>F</span>
  </div>
</div>