Evita que un elemento se gire en una animación circular de CSS3.
Ok, esto realmente se está frustrando por mí aquí, primero que todo si el encuadre de mi pregunta es incorrecto, por favor edítelo (si lo cree) ... y bueno, como lo explicarán mis pantallas, pero aún así me gustaría El elemento debe permanecer en una forma específica y no rotar junto con la animación. ¿Me falta algo realmente estúpido?
Lo que quiero :
Qué esta pasando :
Las soluciones jQuery son bienvenidas (pero me encantarían las soluciones CSS3)
Nota: No opte por la opacidad del elemento, 1 se hace con Paint y el otro con Photoshop. Lo que la materia es cuadrada debe girar como forma cuadrada
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;
}