如何使用 CSS3 动画制作类似原子的动画？

我已经尝试了 3-4 天，但不知道如何制作这个动画，甚至不确定是否可以仅使用 CSS3 制作这样的动画？

我尝试使用animation-direction:alternate;但我无法以特定角度获得这种流动，无法以动画形式呈现它正方形..但不是atom动画的方式，你知道如何使用纯CSS3来实现这一点吗？如果没有，jQuery 有什么解决方案吗？

Found this http://forrst.com/posts/CSS3_only_3D_Animated_Atom-4Dr online.

它利用了transform-style: preserve-3d属性并在 x、y 和 z 轴上旋转电子以实现此 3D 效果。

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 http://jsfiddle.net/bgreater/kfgVr/

博客文章 http://forrst.com/posts/CSS3_only_3D_Animated_Atom-4Dr