How to make ☆ spin around the centre?

Question

I'm trying to make this star spin around it's centre. For now it spins around some other point.

#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">☆</span></div>

How can I fix it so the star spins around its centre?

Answer 1

The default transform-origin is 50% 50% which is what you want.

But you set the width to 0, and so it rotates around 0 in the horizontal direction.

You need to make your element be as large as the contents and also make the contents centered inside it.

In your example just setting the element to inline-block and removing the width:0 will almost fix it.