Zapobiegaj obracaniu się elementu w okrągłej animacji CSS3
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;
}