jquery - 防止元素在圆形 CSS3 动画中自行旋转

Question

好吧，这真的让我很沮丧，首先，如果我的问题框架是错误的，请编辑它(如果你这么认为)......好吧，我的屏幕会向你解释，但我仍然会就像我的元素应该保持特定形状而不是随着动画旋转一样，我错过了一些非常愚蠢的东西吗？

我想要的:

发生了什么:

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

Answer 1

绝对定位，不要改变transform-origin，保持在50% 50%。

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

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

demo