文本上的 css spin 类有一个非常烦人的半径

Question

我找到了一个 css spin 类。它在其他元素上效果很好，但是当我将它应用于文本时，它的半径非常烦人。如何让旋转的轴像它应该的那样位于文本的中间？

.spin {
    -webkit-animation: spin 4s infinite linear;
}

@-webkit-keyframes spin {
  0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}   
}

Answer 1

这取决于您的文本所在的元素，但关键在 display 属性。任何block-level element默认情况下为全 Angular (例如 <div> )。您可以使用 display: inline-block 强制元素成为内联 block 。 ，这会将元素的宽度限制在文本的边缘，并使旋转按预期运行。

这可以从以下方面看出:

.spin {
  -webkit-animation: spin 4s infinite linear;
  display: inline-block;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

<div class="spin">Spin</div>

请注意，这仅适用于inline-block显示，不 inline显示，至于旋转工作，您需要元素能够调整其在容器中的位置。