Ok, to jest dla mnie naprawdę sfrustrowane, przede wszystkim jeśli moje pytanie jest błędne, proszę go edytować (jeśli tak myślisz) ... i ok, ponieważ moje ekrany wyjaśnią ci, ale mimo to chciałbym, żeby mój element powinien pozostać w określonym kształcie i nie obracać się wraz z animacją, brakuje mi czegoś naprawdę głupiego?

Czego chcę :

Co się dzieje :

Rozwiązania jQuery są mile widziane (ale chciałbym CSS3 Solutions)

Uwaga: Nie kontynuuj krycia elementu, 1 jest tworzony za pomocą programu Paint, a inny za pomocą Photoshopa. Co ma znaczenie to kwadrat powinien obracać się jako kwadratowy kształt

HTML

<div><span></span></div>

CSS

@keyframes round_round {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

div {
    width: 50px;
    height: 50px;
    animation: round_round 3s linear infinite;
    margin: 50px auto 0;
    transform-origin: 50% 150px;
    background-color: #8FC1E0;
}

span {
    display: inline-block;
    margin: 5px;
    height: 5px;
    width: 5px;
    background: #c00000;
}

Próbny