CSS3アニメーションを使用してアニメーションのようなアトムを作成する方法は？

私はこれを3〜4日後に試していますが、どうやってこのアニメーションを作ることができません。CSS3だけを使ってこのようなアニメーションを作ることが可能かどうかは確かです。CSS3アニメーションを使用してアニメーションのようなアトムを作成する方法は？

Atom

、任意のアイデアどのようにこれを私はanimation-direction:alternate;を使用してみましたが、私は、特定の角度で正方形でそれをアニメーション化することができ、この流れを取得することはできませんよ..しかしない方法で原子は、アニメーション化純粋なCSS3を使用して達成することができますか？そうでない場合、jQueryには何か解決策がありますか？

出典

2012-10-06 Mr. Alien

これは、http://stackoverflow.com/questions/16500907/collapsible-panel-in-html-cssのようなものを閉じるためにOPが来たのと同じ理由で閉じなければなりません（私は個人的に両方が有効だと思っていますが、 OPは明らかに二重の基準を持っています） – gcb

@gcb日付を比較すると、私はウェブサイトを初めて知っていて、ルールを認識していないときにこの質問をしました:) –

@gcb [これ（http://stackoverflow.com/q/13132864/1542290）、あなたは私の多くがより良い見つけるでしょう:) –

が見つかりました。thisがオンラインです。

これはtransform-style: preserve-3dプロパティを使用し、この3D効果を達成するためにx、y、z軸上の電子を回転させます。

HTML構造

<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

出典

2012-10-06 06:43:46 prashanth

その本当に素晴らしいですが、私は原子GIF画像を直接使用することができれば、どうして私はcssのために行くのだろうか。たくさんのコードを書かなければならない。:( –

@RahulR。CSSだけで何ができるのかを知ることは楽しいことだが、明らかにgifを使うことができる。何もしていないあなたの頭が静かであることに同意してください）。 –