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

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

我想要什么：

发生了什么事：

欢迎jQuery解决方案（但我喜欢CSS3解决方案）

注意：不要使用元素的不透明度，1是使用Paint和 另外用Photoshop，重要的是正方形应该像正方形一样旋转 形状

HTML

---

绝对定位，不要更改

变换原点

，将其保持在

50%50%

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

---

我刚刚为那些不想使用css3动画的人编写了一个纯JavaScript实现（例如出于兼容性原因）

---

现在它可以工作了，太棒了…顺便说一句，你只需要在你的答案（）中添加一个提琴，顺便说一句，不需要

绝对值
所有现代浏览器都支持CSS3转换（以及IE自9以来的转换）。对英国皇家空军的支持更差（不过你提供了一个后备方案）：@RobW我写这篇文章只是因为我有点喜欢那个动画。只是为了好玩。当然，我知道CSS（3）的东西总是比用JS实现的解决方案更优雅；）
<div><span></span></div>

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

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

// requestAnim shim layer by Paul Irish
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame    || 
          window.oRequestAnimationFrame      || 
          window.msRequestAnimationFrame     || 
          function(/* function */ callback, /* DOMElement */ element) {
            window.setTimeout(callback, 1000 / 60);
          };
})();

function CircleAnimater(elem, radius, speed) {
    this.elem = elem;
    this.radius = radius;
    this.angle = 0;
    this.origX = this.elem.offsetLeft;
    this.origY = this.elem.offsetTop;
    
    this.shouldStop = false;
    this.lastFrame = 0;
    this.speed = speed;
}

CircleAnimater.prototype.start = function () {
    this.lastFrame = +new Date;
    this.shouldStop = false;
    this.animate();
}
    
CircleAnimater.prototype.stop = function () {
    this.shouldStop = true;
}
    
CircleAnimater.prototype.animate = function () {
    var now    = +new Date,
        deltaT = now - this.lastFrame;
    
    var newY = Math.sin(this.angle) * this.radius;
    var newX = Math.cos(this.angle) * this.radius;

    this.elem.style.left = (this.origX + newX) + "px";
    this.elem.style.top = (this.origY + newY) + "px";
    this.angle += (this.speed * deltaT);

    this.lastFrame = +new Date;

    if (!this.shouldStop) {
        var $this = this;
        requestAnimFrame(function () {
            $this.animate();
        });
    }        
}