Хорошо, так что это действительно расстраивает меня здесь, прежде всего, если мой вопрос сформулирован неправильно, пожалуйста, отредактируйте его (если вы так думаете) ... и хорошо, поскольку мои экраны объяснят вам, но все же я хотел бы, чтобы мой Элемент должен оставаться в определенной форме и не вращаться вместе с анимацией, упускает что-то действительно глупое?

Что я хочу :

Что происходит :

Приветствуются решения 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;
}

демонстрация