自从3-4天以来我一直在尝试，但是我无法得到如何制作这个动画，甚至不知道是否可以使用CSS3做一个这样的动画？
我试过使用animation-direction：alternate;但是我不能在一个特定的角度得到这个流程，能够以正方形的形式动画化，但不是原子动画的方式，任何想法如何使用纯CSS3来实现？如果没有在jQuery中有任何解决方案？
解决方法
在线找到
this。
它利用变换风格：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
Blog Post