Wie man ☆ um das Zentrum dreht?

Question

Ich versuche diesen Stern um sein Zentrum zu drehen. Jetzt dreht es sich um einen anderen Punkt.

http://dharman.eu/test/test3.php

#question { 
    animation: 1s linear 0s normal none infinite spin; 
    display: block; 
    width: 0; 
} 

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

Wie kann ich es beheben, damit der Stern dreht sich um seinen Mittelpunkt?

Answer 1

Der Standard transform-origin ist 50% 50% was Sie wollen.

Aber Sie legen die Breite auf 0, und so dreht es sich um 0 in horizontaler Richtung.

Sie müssen Ihr Element so groß wie den Inhalt machen und auch den Inhalt darin zentrieren.

In Ihrem Beispiel wird nur das Setzen des Elements auf inline-block und das Entfernen der width:0 wird es fast beheben.