css3加js做一个简单的3D行星运转效果实例代码

前几天在园子里看到一篇关于CSS3D行星运转的文章，感觉这个效果也太酷炫了，于是自己也就心血来潮的来尝试的做了一下。因为懒得去用什么插件了，于是就原生的JS写，效果有点粗超，还有一些地方处理的不是很好，如果有好的建议万望留言告知，不胜感谢。好了不说废话了，下面附上代码。

HTML部分

<div class="path-Saturn">
<div id="Saturn" title="土星">
<div class="x"></div>
<div class="y"></div>
<div class="z"></div>
<div class="space space-x"></div>
<div class="space space-x1"></div>
<div class="space space-x2"></div>
 <div class="space space-y"></div>
<div class="space space-y1"></div>
<div class="space space-y2"></div>
 <div class="space space-z"></div>
<div class="space space-z1"></div>
<div class="space space-z2"></div>
 <!-- 卫星 -->
<div class="path-satellite">
<div id="satellite" title="卫星">
<div class="x"></div>
<div class="y"></div>
<div class="z"></div>
<div class="space space-x"></div>
<div class="space space-x1"></div>
<div class="space space-x2"></div>
 <div class="space space-y"></div>
<div class="space space-y1"></div>
<div class="space space-y2"></div>
 <div class="space space-z"></div>
<div class="space space-z1"></div>
<div class="space space-z2"></div>
</div>
</div>
</div>
</div>

这里用前三个类为x、y、z的div来画的每一个星球的x、y、z轴，然后这些星球之间是可以嵌套的，就是像上面的代码一样，里面的星球是外面星球的卫星。

css部分

.path-Saturn, .path-earth, .path-Venus, .path-Neptune, .path-Jupiter, .path-Mercury, .path-satellite, .path-moon{
position: absolute;
width: 95%;
height: 95%;
top: 2.5%;
left: 2.5%;
border: 1px solid #ddd;
border-radius: 50%;
transform: rotateX(60deg);
transform-style: preserve-3d;
}
#sun, #earth, #Saturn, #Venus, #Neptune, #Jupiter, #Mercury, #satellite, #moon{
width: 160px;
height: 160px;
position: absolute;
transform-style: preserve-3d;
top: 50%;
left: 50%;
margin: -80px 0 0 -80px;