किसी तत्व को गोलाकार CSS3 एनीमेशन

Question

में घुमाने के लिए रोकें ठीक है तो यह वास्तव में मेरे लिए निराश हो रहा है, सबसे पहले अगर मेरा प्रश्न फ़्रेमिंग गलत है तो कृपया इसे संपादित करें (यदि आपको ऐसा लगता है) ... और ठीक है, क्योंकि मेरी स्क्रीन आपको समझाएगी, लेकिन फिर भी मैं चाहूंगा कि मेरा तत्व एक विशिष्ट आकार में रहना चाहिए और एनीमेशन के साथ घुमाने के लिए नहीं, क्या वास्तव में कुछ बेवकूफ चीज़ याद आ रही है?

मैं क्या चाहते हैं:

क्या हो रहा है:

jQuery समाधान स्वागत किया (लेकिन मैं प्यार होता CSS3 के समाधान)

नोट: 1 किया जाता है तत्व की अस्पष्टता पर मत जाओ पेंट और फोटोशॉप, क्या बात है Is स्क्वायर स्क्वायर आकार के रूप में घुमाएँ चाहिए के साथ अन्य का उपयोग कर

एचटीएमएल

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

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

Answer 2

मैं बस जो लोग सीएसएस 3 एनिमेशन का उपयोग नहीं करना चाहते हैं (उदाहरण के लिए संगतता कारणों के लिए) के लिए एक शुद्ध जावास्क्रिप्ट कार्यान्वयन लिखा है।

Demo

// 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(); 
     }); 
    }   
}