Hovering on element glitches transform transition

Question

How to stop each letter for glitching when hovering on its bottom part? It happens because the letter changes position so it is rapidly toggling its transition, but how to code this better so transition will be smooth? https://codepen.io/anon/pen/XBmPMV

#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>

Answer 1

Consider a pseudo element that will make the hover area bigger:

#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>