Jak wykonać ☆ obrót wokół środka?

Question

Staram się, aby ta gwiazda kręciła się wokół jej środka. Na razie obraca się wokół jakiegoś innego punktu.

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);} 
} 

Jak mogę naprawić to więc gwiazda obraca się wokół własnej osi?

Answer 1

Domyślnym transform-origin jest 50% 50%, czego chcesz.

Ale ustawiasz szerokość na 0, a więc obraca się ona wokół 0 w kierunku poziomym.

Musisz sprawić, by element był tak duży, jak zawartość, a także aby zawartość była wyśrodkowana w środku.

W twoim przykładzie wystarczy ustawić element na inline-block i usunąć width:0 prawie to naprawi.