Verhindern, dass sich ein Element in einer kreisförmigen CSS3-Animation dreht
Ok, das ist wirklich frustrierend für mich hier. Wenn meine Frage falsch ist, bearbeite sie bitte (wenn du das glaubst) Element soll in einer bestimmten Form bleiben und sich nicht mit der Animation mitdrehen, fehlt etwas wirklich Dummes?
Was ich möchte :
Was ist los :
jQuery-Lösungen sind willkommen (aber ich würde CSS3-Lösungen lieben)
Hinweis: Gehen Sie nicht auf die Deckkraft des Elements ein, 1 wird mit Paint und andere mit Photoshop gemacht, Was Materie ist Quadrat sollte sich als quadratische Form drehen
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;
}