jquery – 防止元素在循环CSS3动画中旋转

好的,这对我来说真的很沮丧,首先如果我的问题框架错了,请修改它(如果你这样想)…好的,因为我的屏幕会解释你,但是我仍然希望我元素应该保持特定的形状,不要与动画一起旋转,我错过了一些真正愚蠢的东西？

我想要的是 ：

发生了什么 ：

jQuery解决方案欢迎(但我会喜欢CSS3解决方案)

Note: Don’t go on the element’s opacity,1 is made using Paint and
other with Photoshop,What Matter’s Is Square Should Rotate As Square
Shape

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;
}

Demo

@keyframes rot {
  0% { transform: rotate(0deg) translate(150px) rotate(0deg); }
  100% { transform: rotate(360deg) translate(150px) rotate(-360deg); }
}