好吧，这对我来说真的很沮丧，首先，如果我的问题框架错误，请编辑它（如果你这么认为）......好吧，因为我的屏幕会向你解释，但我仍然希望我的元素应该保持特定的形状，而不是随着动画旋转，我错过了一些非常愚蠢的事情吗？

我想要的是 :

发生了什么 :

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

Demo

绝对定位，不要改变transform-origin，将其保留在50% 50%.

然后简单地旋转元素，将其平移半径值，然后取消第一次旋转 - 您可以看到链接变换是如何工作的here.

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

demo