悬停在元素故障转换过渡

Question

鼠标悬停在字母底部时，如何防止每个字母出现故障？发生这种情况是因为字母改变了位置，所以它正在快速切换其过渡，但是如何更好地编码以便过渡顺利？ 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

考虑一个可以使悬停区域变大的伪元素：

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

Answer 2

在悬停时为元素应用边框以增加它们的面积就可以了。如果你走这条路，你还需要在悬停时应用负边距以保持元素就位。

#text {
  cursor: pointer;
  font-size: 7em;
  font-weight: 700;
  text-transform: uppercase;
  span {
    display: inline-block;
  transition: transform 200ms;
    &:hover {
      transform: translateY(-1em) rotate(10deg) scale(1.5);
      border: 0.3em solid transparent;
      margin: -0.3em;
    }
  }
}

悬停在元素故障转换过渡

Hovering on element glitches transform transition

html

css

css-transforms