前幾天在園子里看到一篇關于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;