CSS3 animasyonlarını kullanarak bir atom benzeri animasyon nasıl oluşturulur?

Question

3-4 gün bu denemeyi deniyorum, ancak bu animasyonu nasıl yapacağımı bile edemiyorum, sadece CSS3 kullanarak böyle bir şey yapmanın mümkün olup olmadığından emin değil miyim?

, bir fikrin nasıl bu ben animation-direction:alternate; kullanarak çalıştı ama, belirli bir açıda bir kare şekilli bunu animasyon mümkün bu akışı elde etmek mümkün değilim .. ama yolu atomu canlandıran saf CSS3 kullanarak yapılabilir? yoksa jQuery'de herhangi bir çözüm var mı?

Answer 1

this çevrimiçi bulundu.

Bu transform-style: preserve-3d özelliği kullanır ve x elektronları döner, y ve z eksenleri Bu 3 boyutlu bir etki elde etmek için.

HTML Yapısı

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

CSS

.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

Kesinlikle mümkün CSS. @ Prashanth'ın mesajını fark etmeden önce bir kavram kanıtı olarak son derece basit bir araya getirdim. Bulduğu yer waaay daha soğuk, ama yine de benimki ... süper çıplak kemikleri ama biraz kibar ve güzel görünüyor.

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

Answer 3

Ben bu bir de sen istedin benziyor ama onlar jQuery ile bir çözüm olmadığını bulabilir Krom 9

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

o itibariyle Safari sadece animasyon için olduğunu söyledi tarayıcınızı uyumlu bir şekilde önemsersiniz.