Evitar que um elemento gire em uma animação CSS3 circular
Ok, isso está realmente ficando frustrado para mim aqui, em primeiro lugar, se o meu enquadramento de perguntas estiver errado, por favor, edite-o (se você acha) ... e ok, como minhas telas vão explicar, mas eu gostaria que meu elemento deve ficar em uma forma específica e não para rodar junto com a animação, estou faltando algo realmente estúpido?
O que eu quero :
O que está acontecendo :
Soluções da jQuery são bem-vindas (mas eu adoraria soluções CSS3)
Nota: Não vá na opacidade do elemento, 1 é feito usando Paint e outro com Photoshop, What Matter's Is Square deve girar como formato quadrado
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;
}