CSS3 एनीमेशन का उपयोग कर एनीमेशन की तरह परमाणु कैसे बनाया जाए?

Question

मैं 3-4 दिनों से यह कोशिश कर रहा हूं लेकिन मैं यह एनीमेशन कैसे बना सकता हूं, यह सुनिश्चित करने में भी सक्षम नहीं हूं कि केवल CSS3 का उपयोग करके ऐसा करना संभव है या नहीं?

मैं animation-direction:alternate; का उपयोग कर की कोशिश की, लेकिन मैं, एक वर्ग आकार में यह चेतन करने में सक्षम एक विशेष कोण में इस प्रवाह प्राप्त करने में सक्षम नहीं कर रहा हूँ .. लेकिन नहीं जिस तरह से परमाणु एनिमेट होने, किसी भी विचार कैसे इस शुद्ध CSS3 का उपयोग कर पूरा किया जा सकता है? अगर jQuery में कोई समाधान नहीं है?

Answer 1

this ऑनलाइन मिला।

यह transform-style: preserve-3d संपत्ति का उपयोग करता है और इस 3 डी प्रभाव को प्राप्त करने के लिए एक्स, वाई और जेड अक्ष पर इलेक्ट्रॉनों को घुमाता है।

एचटीएमएल संरचना

<div id="main"> 
    <div id="atom"> 
     <div class="orbit"> 
      <div class="path"> 
       <div class="electron"></div> 
      </div> 
     </div> 
     <div class="orbit"> 
      <div class="path"> 
       <div class="electron"></div> 
      </div> 
     </div> 
     <div class="orbit"> 
      <div class="path"> 
       <div class="electron"></div> 
      </div> 
     </div> 
     <div class="orbit"> 
      <div class="path"> 
       <div class="electron"></div> 
      </div> 
     </div> 
     <div id="nucleus"></div> 
    </div> 
</div> 

सीएसएस

.orbit { 
    -webkit-transform-style: preserve-3d; 
    -webkit-transform: rotateX(80deg) rotateY(20deg); 
} 

#atom .orbit:nth-child(2) { 
    -webkit-transform: rotateX(80deg) rotateY(70deg) 
} 
#atom .orbit:nth-child(3) { 
    -webkit-transform: rotateX(80deg) rotateY(-20deg) 
} 
#atom .orbit:nth-child(4) { 
    -webkit-transform: rotateX(80deg) rotateY(-50deg) 
} 

.path { 
    -webkit-transform-style: preserve-3d; 
    -webkit-animation-name: pathRotate; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
} 

.electron { 
    -webkit-animation-name: electronFix; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
} 

@-webkit-keyframes pathRotate { 
    from { 
     -webkit-transform: rotateZ(0deg); 
    } to { 
     -webkit-transform: rotateZ(360deg); 
    } 
} 

@-webkit-keyframes electronFix { 
    from { 
     -webkit-transform: rotateX(90deg) rotateY(0deg); 
    } to { 
     -webkit-transform: rotateX(90deg) rotateY(-360deg); 
    } 
} 

Fiddle

Blog Post

Answer 2

निश्चित रूप से संभव सीएसएस। @ प्रशांत की पोस्ट को ध्यान में रखते हुए मैंने अवधारणा के सबूत के रूप में एक बेहद बुनियादी भूमिका निभाई। वह जो मिला वह वैसे कूलर है, लेकिन यहां मेरा वैसे भी है ... सुपर नंगे हड्डियों लेकिन थोड़ा सा झुकाव और यह बहुत अच्छा लगेगा।

http://jsfiddle.net/BZFJ8/2/

Answer 3

मैं इस एक भी आप के लिए क्या पूछा की तरह दिखता है लगता है, लेकिन उन्होंने कहा कि इसके बारे में के रूप में सफारी केवल एनीमेशन के लिए है क्रोम 9

http://bgre.at/demo/CSS3-atom/index.html

आप अगर jQuery के साथ एक समाधान मिल सकती है आप ब्राउज़र के बारे में संगत रूप से परवाह करते हैं।