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

Question

好的,所以这对我来说真的很沮丧,首先如果我的问题框架是错误的,请编辑它(如果你这么认为)......好吧,因为我的屏幕会解释你,但我还是希望我的元素应该保持在特定的形状而不是随动画旋转,我错过了一些真正愚蠢的东西？

我想要的:

发生了什么:

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

注意:不要继续使用元素的不透明度,1使用Paint和其他使用Photoshop制作,What Matter是Square应该旋转为方形

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

演示

Answer 1

绝对定位,不要改变transform-origin,留下它50% 50%.

然后只需旋转元素,将其转换为半径值,然后取消第一次旋转 - 您可以在此处查看链接变换的工作原理.

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

演示