当鼠标悬停在文本块上时，CSS转场会对文本的首字母产生不必要的影响

Question

我有一个简单的块，里面有一个文本，一切看起来都很正常，但是当我把鼠标悬停在一个块上时，在这个过程中文本的行为很奇怪:每个单词的第一个字母都向下移动。当我从代码中删除转换时，我不会遇到同样的问题。我搜索了与CSS转换问题相关的其他问题，但没有找到解决这个问题的方法。有人能告诉我，为什么会发生这种情况，以及如何避免这种行为吗?

这是codepen

这里是链接，在这里你可以看到它的行为

HTML

<div class="container">
  <div class="box grow">
    <p>Box grow</p>
  </div> 
</div>

CSS

body {
  background-color: #ddd;
}
.container {
  margin-top: 30px;
  text-align: center;
}
.box {
  display: inline-block;
  width: 100px;
  line-height: normal;
  background-color: #fff;
  border-radius: 5px;
  transition: 0.5s cubic-bezier(0.29, 0.01, 0.72, 1);
}
.grow:hover {
  transform: scale(1.15, 1.15);
}

Answer 1

要解决这个问题，您可以将backface-visibility: hidden;添加到您的.boxdiv中，然后将translate3d(0, 0, 0);设置为悬停。

CSS

.box {
  backface-visibility: hidden;
}
.grow:hover {
  transform: scale(1.15, 1.15) translate3d(0, 0, 0);
}

CodePen