Предотвратить поворот элемента в круговой анимации CSS3
Хорошо, так что это действительно расстраивает меня здесь, прежде всего, если мой вопрос сформулирован неправильно, пожалуйста, отредактируйте его (если вы так думаете) ... и хорошо, поскольку мои экраны объяснят вам, но все же я хотел бы, чтобы мой Элемент должен оставаться в определенной форме и не вращаться вместе с анимацией, упускает что-то действительно глупое?
Что я хочу :
Что происходит :
Приветствуются решения jQuery (но я бы хотел решения CSS3)
Примечание: не используйте непрозрачность элемента, 1 сделан с использованием Paint, а другой с Photoshop, то, что имеет значение квадрат, должно вращаться как квадратная форма
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;
}