html - 如何让 ☆ 围绕中心旋转？

Question

我试图让这颗恒星围绕它的中心旋转。现在它围绕着另一个点旋转。

#question {
    font-size: 3em;
    animation: 1s linear 0s normal none infinite spin;
    display: block;
    width: 0;
}

 @keyframes spin {
     from { transform: rotate(00deg); }
     to { transform: rotate(360deg); }
 }

<div id="testWrapper"><span id="question">☆&lt;/span></div>

我怎样才能修复它，让星星围绕它的中心旋转？

Answer 1

默认transform-origin是50% 50%你想要的。

但是您将宽度设置为 0，因此它在水平方向上围绕 0 旋转。

您需要使您的元素与内容一样大，并使内容在其中居中。

在您的示例中，只需将元素设置为inline-block并删除width:0将几乎可以修复它。