How to make ☆ rotation around the center?

Question

I am trying to make this star revolve around this center. So far, it revolves 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 this so that the star rotates around its center?

Answer 1

By default, transform-origin is 50% 50% what you need.

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

You need to make your element as big as the contents, and also make the contents inside it.

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