简单版效果图：
背景为八大行星和太阳系的相关数据。
背景和太阳都可以实现单击隐藏、双击显示。
行星的大小和轨道只是粗略地表示了相关关系，但运行的周期（即公转的速度是严格按照其公转周期按比较设置的。（1 month / 3 second）
复杂精确版：
复杂精确版代码：
https://github.com/wwuhn/Html-CSS-JS/blob/solarSys/solarSystem3D
以下是简单版代码：
（CSS代码稍有冗余，一些选择器的相同代码可以写到一起。）
（按钮控制隐藏、显示的是简单的几行jQuery代码。）
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta name="author" content="http://www.softwhy.com/" />
<title>solar system</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function()
{
$("#hide1").click(function(){$("#tbrowser").hide()});
$("#hide1").dblclick(function(){$("#tbrowser").show();});
$("#hide2").click(function(){$("#solar").hide()});
$("#hide2").dblclick(function(){$("#solar").show();});
});
</script>
<style>
.container{
margin:auto;
width:75.29%;
clear:both;
}
#tbrowser {
width:100%;
margin:auto;
border-collapse:collapse;
font-family:"宋体";
text-align:left;
line-height:1.3em;
table-layout:fixed;
}
#tbrowser a:link，.container a:visited{
font-size:18px;
text-decoration:none;
}
#tbrowser th,#tbrowser td{
border:1px solid #111;
color:#333;
text-align:left;
font-family: "宋体";
padding-left:3px;
text-align:center;
background-color:black;
}
*{
margin: 0;
padding: 0;
}
body{
background-color: #000;
}
div{
border-radius: 50%;
}
.sun{
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width: 70px; /*sun's size*/
height: 70px;
background-color: #ffd700;
border-radius: 50%;
box-shadow: 0 0 20px 1px #ffd700;
text-align:center;
vertical-align:middle;
}
/*水星*/
.Mercury{
position: absolute;
width: 120px;
height: 120px;
border: 1px dotted #444;
transform: translate(-50%,-50%);
left: 50%;
top: 50%;
animation: autoPlay 8.797s linear infinite ;
}
.Mercury::before{
content: '';
position: absolute;
width: 12px;
height: 12px;
top: 50%;
transform: translate(-50%,-50%);
border-radius: 50%;
background-color: #f0e68c;
box-shadow:0px 0px 10px 1px #f0e68c;
}
/*金星*/
.vnues{
position: absolute;
width: 180px;
height: 180px;
border: 1px dotted #444;
transform: translate(-50%,-50%);
left: 50%;
top: 50%;
animation: autoPlay 22.470s linear infinite ;
}
.vnues::before{
content: '';
position: absolute;
width: 28px;
height: 28px;
top: 50%;
transform: translate(-50%,-50%);
border-radius: 50%;
background-color: yellow;
box-shadow:0px 0px 10px 1px yellow;
}
/*地球*/
.earth{
position: absolute;
width: 275px; /*size of earth's path*/
height: 275px;
border: 1px dotted #444;
transform: translate(-50%,-50%);
left: 50%;
top: 50%;
animation: autoPlay 36.526s linear infinite ;
}
.earth::before{
content: '';
position: absolute;
width: 30px; /*earth's size*/
height: 30px;
top: 50%;
transform: translate(-50%,-50%);
border-radius: 50%;
background-color: deepskyblue;
box-shadow:0px 0px 10px 1px blue ;
}
/*月球*/
.moon{
position: absolute;
width: 50px;
height: 50px;
transform: translate(-50%,-50%);
top: 50%;
animation: autoPlay 3s linear infinite ;
}
.moon::before{
content: '';
position: absolute;
width: 10px;
height: 10px;
top: 50%;
border-radius: 50%;
transform: translate(-50%,-50%);
background-color: #fff;
box-shadow:0px 0px 10px 1px #fff ;
}
/*火星*/
.Mars{
position: absolute;
width: 400px; /*size of earth's path*/
height: 400px;
border: 1px dotted #444;
transform: translate(-50%,-50%);
left: 50%;
top: 50%;
animation: autoPlay 68.698s linear infinite ;
}
.Mars::before{
content: '';
position: absolute;
width: 16px; /*earth's size*/
height: 16px;
top: 50%;
transform: translate(-50%,-50%);
border-radius: 50%;
background-color: red;
box-shadow:0px 0px 10px 1px red ;
}
/*木星*/
.Jupiter{
position: absolute;
width: 550px; /*size of earth's path*/
height: 550px;
border: 1px dotted #444;
transform: translate(-50%,-50%);
left: 50%;
top: 50%;
animation: autoPlay 432.89s linear infinite ;
}
.Jupiter::before{
content: '';
position: absolute;
width: 50px; /*earth's size*/
height: 50px;
top: 50%;
transform: translate(-50%,-50%);
border-radius: 50%;
background-color: #f5deb3;
box-shadow:0px 0px 10px 1px #f5deb3 ;
}
/*土星*/
.Saturn{
position: absolute;
width: 670px; /*size of earth's path*/
height: 670px;
border: 1px dotted #444;
transform: translate(-50%,-50%);
left: 50%;
top: 50%;
animation: autoPlay 1075.29s linear infinite ;
}
.Saturn::before{
content: '';
position: absolute;
width: 48px; /*earth's size*/
height: 48px;
top: 50%;
transform: translate(-50%,-50%);
border-radius: 50%;
background-color: #bdb76b;
box-shadow:0px 0px 10px 1px #bdb76 ;
}
/*天王星*/
.Uranus{
position: absolute;
width: 850px; /*size of earth's path*/
height: 850px;
border: 1px dotted #444;
transform: translate(-50%,-50%);
left: 50%;
top: 50%;
animation: autoPlay 3066.365s linear infinite ;
}
.Uranus::before{
content: '';
position: absolute;
width: 16px; /*earth's size*/
height: 16px;
top: 50%;
transform: translate(-50%,-50%);
border-radius: 50%;
background-color: darkslateblue;
box-shadow:0px 0px 10px 1px darkslateblue ;
}
/*海王星*/
.Neptune{
position: absolute;
width: 1000px; /*size of earth's path*/
height: 1000px;
border: 1px dotted #444;
transform: translate(-50%,-50%);
left: 50%;
top: 50%;
animation: autoPlay 6014.835s linear infinite ;
}
.Neptune::before{
content: '';
position: absolute;
width: 15px; /*earth's size*/
height: 15px;
top: 50%;
transform: translate(-50%,-50%);
border-radius: 50%;
background-color: blue;
box-shadow:0px 0px 10px 1px blue ;
}
@keyframes autoPlay {
0%{
transform: translate(-50%,-50%) rotate(180deg) ;
}
100%{
transform: translate(-50%,-50%) rotate(-180deg) ;
}
}
a:link,a:visited{
color:#666;
text-decoration:none;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head>
<body style="overflow-y: hidden; overflow:hidden">
<div style="position:absolute; color:#555; text-align:right; width:100%;">
<p>公转速度模拟:</p>
<p>1 month / 3 second</p>
<p> <a href = "javascript:void" title="单击隐藏数据，双击显示数据" id="hide1">隐藏或显示数据</a></p>
<p> <a href = "javascript:void" title="单击隐藏太阳系，双击显示太阳系" id="hide2">隐藏或显示太阳系</a></p>
<p>水漫金山地，火烧木焦土；
<p>天海成一体，浩浩太阳系。</p>
</div>
<div id = "solar">
<div class="sun"><p style="margin-top:30%;"><p style="color:#990000;">sun<p></div>
<div class="Mercury"><p style="color:white; vertical-align:middle; text-align:left; margin-left:-5px; margin-top:28%;">水</p></div>
<div class="vnues"><p style="color:white; vertical-align:middle; text-align:left; margin-left:-5px; margin-top:30%;">金</p></div>
<div class="earth"><div class="moon"></div></div>
<div class="Mars"><p style="color:white; vertical-align:middle; text-align:left; margin-left:-6px; margin-top:42%;">火</p></div>
<div class="Jupiter"><p style="color:white; vertical-align:middle; text-align:left; margin-left:-5px; margin-top:41%;">木</p></div>
<div class="Saturn"><p style="color:white; vertical-align:middle; text-align:left; margin-left:-5px; margin-top:43%;">土</p></div>
<div class="Uranus"><p style="color:white; vertical-align:middle; text-align:left; margin-left:-7px; margin-top:46.5%;">天</p></div>
<div class="Neptune"><p style="color:white; vertical-align:middle; text-align:left; margin-left:-8px; margin-top:47%;">海</p></div>
</div>
<div class="container" style="color:#666666;">
<!--<p style="text-align:right;">1 one month/3s；</p>-->
<table id="tbrowser">
<col width="3%" />
<col width="7%" />
<col width="10%" />
<col width="13%" />
<col width="10%" />
<col width="8%" />
<col width="10%" />
<col width="10%" />
<col width="10%" />
<col width="8%" />
<col width="7%" />
<tr>
<th>序</th>
<th>名称</th>
<th>英文名</th>
<th>直径<br />
(公里)</th>
<th class="fsize80">日距<br />
(亿千米)</th>
<th class="fsize70">日距<br />
(天文单位)</th>
<th>质量<br />
(Ｍ地)</th>
<th>体积<br />
(Ｖ地)</th>
<th>平均密度<br />
g/cm^3</th>
<th class="fsize80">运行速率<br />
(公里/秒)</th>
<th class="fsize80">others</th>
</tr>
<tr>
<td>0</td>
<td>太阳</td>
<td>Sun</td>
<td>1,392,530</td>
<td> </td>
<td> </td>
<td>332,948</td>
<td>1,303,536</td>
<td>1.409</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>1</td>
<td>水星</td>
<td>Mercury</td>
<td>4878</td>
<td>0.5791</td>
<td>0.39</td>
<td>0.06</td>
<td>0.06</td>
<td>5.43</td>
<td>47.89</td>
<td> </td>
</tr>
<tr>
<td>2</td>
<td>金星</td>
<td>Venus</td>
<td>12103</td>
<td>1.0820</td>
<td>0.72</td>
<td>0.81</td>
<td>0.86</td>
<td>5.24</td>
<td>35.03</td>
<td> </td>
</tr>
<tr>
<td>3</td>
<td>地球</td>
<td>Earth</td>
<td>12756</td>
<td>1.4960</td>
<td>1.00</td>
<td>1.00</td>
<td>1.00</td>
<td>5.52</td>
<td>29.79</td>
<td> </td>
</tr>
<tr>
<td>4</td>
<td>火星</td>
<td>Mars</td>
<td>6786</td>
<td>2.2794</td>
<td>1.52</td>
<td>0.11</td>
<td>0.15</td>
<td>3.95</td>
<td>24.13</td>
<td> </td>
</tr>
<tr>
<td>5</td>
<td>木星</td>
<td>Jupiter</td>
<td>142984</td>
<td>7.7833</td>
<td>5.20</td>
<td>318.00</td>
<td>1319.00</td>
<td>1.33</td>
<td>13.06</td>
<td> </td>
</tr>
<tr>
<td>6</td>
<td>土星</td>
<td>Saturn</td>
<td>120536</td>
<td>14.2698</td>
<td>9.54</td>
<td>95.18</td>
<td>744.00</td>
<td>0.69</td>
<td>9.64</td>
<td> </td>
</tr>
<tr>
<td>7</td>
<td>天王星</td>
<td>Uranus</td>
<td>51118</td>
<td>28.7099</td>
<td>19.18</td>
<td>14.50</td>
<td>67.00</td>
<td>1.29</td>
<td>6.81</td>
<td> </td>
</tr>
<tr>
<td>8</td>
<td>海王星</td>
<td>Neptune</td>
<td>49528</td>
<td>45.0430</td>
<td>30.06</td>
<td>17.14</td>
<td>57.00</td>
<td>1.64</td>
<td>5.43</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>月球</td>
<td>Moon</td>
<td>3476．4</td>
<td> </td>
<td> </td>
<td>1/81</td>
<td> </td>
<td>3．34</td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>序</th>
<th>名称</th>
<th>公转周期</th>
<th>自转方向</th>
<th>自转周期</th>
<th class="fsize80"></th>
<th>反射率</th>
<th>卫星数<br />
(已确认)</th><th class="fsize80">表面重力<br />(g地)
<th colspan="2">表面温度<br />
(摄氏)</th>
</th>
</tr>
<tr>
<td>1</td>
<td>水星</td>
<td>87.97天</td>
<td>自西向东</td>
<td>58.65天</td>
<td></td>
<td>0.11</td>
<td>0</td> <td>0.38</td>
<td colspan="2">－180～＋430 ℃</td>
</tr>
<tr>
<td>2</td>
<td>金星</td>
<td>224.70天</td>
<td>自东向西</td>
<td>243天</td>
<td>0.90</td>
<td></td>
<td>0</td> <td>0.90</td>
<td colspan="2">＋465～＋500 ℃</td>
</tr>
<tr>
<td>3</td>
<td>地球</td>
<td>365.26天</td>
<td>自西向东</td>
<td>23时56分</td>
<td></td>
<td>0.37</td>
<td>1</td><td>1.00</td>
<td colspan="2">－ 89～＋ 58 ℃</td>
</tr>
<tr>
<td>4</td>
<td>火星</td>
<td>686.98天</td>
<td>自西向东</td>
<td>24时37分</td>
<td></td>
<td>0.15</td>
<td>2</td><td>0.38</td>
<td colspan="2">－133～＋ 27 ℃</td>
</tr>
<tr>
<td>5</td>
<td>木星</td>
<td>11.86年</td>
<td>自西向东</td>
<td>9时50分</td>
<td></td>
<td>0.52</td>
<td>16</td><td>2.64</td>
<td colspan="2">－150～－140 ℃</td>
</tr>
<tr>
<td>6</td>
<td>土星</td>
<td>29.46年</td>
<td>自西向东</td>
<td>10时39分</td>
<td></td>
<td>0.47</td>
<td>23</td><td>0.93</td>
<td colspan="2">－180～－125 ℃</td>
</tr>
<tr>
<td>7</td>
<td>天王星</td>
<td>84.01年</td>
<td>自东向西</td>
<td>17时14分</td>
<td></td>
<td>0.51</td>
<td>21</td><td>0.79</td>
<td colspan="2">－224～－216 ℃</td>
</tr>
<tr>
<td>8</td>
<td>海王星</td>
<td>164.79年</td>
<td>自西向东</td>
<td>16时7分</td>
<td></td>
<td>0.41</td>
<td>27</td><td>1.12</td>
<td colspan="2">－218～－190 ℃</td>
</tr>
<tr>
<th>序</th>
<th>名称</th>
<th style="font-size:15px;">轨道倾斜角<br />
(度)</th>
<th>轨道<br />
离心率</th>
<th style="font-size:15px;">自转轴<br />
倾斜角(度)</th>
<th style="font-size:15px;">逃逸速度<br />
km/s</th>
<th style="font-size:15px;">重力加速度<br />
(m/s2)</th>
<th>表层温度<br />
(平均)</th>
<th>近日点<br />
距离</th>
<th>远日点<br />
距离</th>
<th> </th>
</tr>
<tr>
<td> </td>
<td>太阳</td>
<td align="right"> </td>
<td align="right"> </td>
<td align="right"> </td>
<td align="right">618</td>
<td align="right"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>1</td>
<td>水星</td>
<td align="right">7.0048</td>
<td align="right">0.2056</td>
<td align="right">0.00</td>
<td align="right">4.44</td>
<td align="right">3.701</td>
<td>179℃</td>
<td>0.3075</td>
<td>0.4612</td>
<td> </td>
</tr>
<tr>
<td>2</td>
<td>金星</td>
<td align="right">3.9347</td>
<td align="right">0.0068</td>
<td align="right">177.33</td>
<td align="right">10.40</td>
<td align="right">8.78</td>
<td>480℃</td>
<td>0.7205</td>
<td>0.7255</td>
<td> </td>
</tr>
<tr>
<td>3</td>
<td>地球</td>
<td align="right">0.0000</td>
<td align="right">0.0167</td>
<td align="right">23.45</td>
<td align="right">11.20</td>
<td align="right">9.78</td>
<td>15℃</td>
<td>0.9833</td>
<td>1.0167</td>
<td> </td>
</tr>
<tr>
<td>4</td>
<td>火星</td>
<td align="right">1.8506</td>
<td align="right">0.9341</td>
<td align="right">25.19</td>
<td align="right">5.02</td>
<td align="right">3.72</td>
<td>-55℃</td>
<td>——</td>
<td>——</td>
<td> </td>
</tr>
<tr>
<td>5</td>
<td>木星</td>
<td align="right">1.3053</td>
<td align="right">0.0489</td>
<td align="right">3.08</td>
<td align="right">60.20</td>
<td align="right">23.12</td>
<td>-140℃</td>
<td>——</td>
<td>——</td>
<td> </td>
</tr>
<tr>
<td>6</td>
<td>土星</td>
<td align="right">2.4845</td>
<td align="right">0.0542</td>
<td align="right">26.73</td>
<td align="right">35.60</td>
<td align="right">10.17</td>
<td>-140℃</td>
<td>——</td>
<td>——</td>
<td> </td>
</tr>
<tr>
<td>7</td>
<td>天王星</td>
<td align="right">0.7699</td>
<td align="right">0.0472</td>
<td align="right">97.92</td>
<td align="right">21.30</td>
<td align="right">8.69</td>
<td>-220℃</td>
<td>18.3755</td>
<td>20.0833</td>
<td> </td>
</tr>
<tr>
<td>8</td>
<td>海王星</td>
<td align="right">1.7692</td>
<td align="right">0.0859</td>
<td align="right">28.80</td>
<td align="right">23.60</td>
<td align="right">11.00</td>
<td>-214℃</td>
<td>——</td>
<td>——</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>月球</td>
<td align="right"> </td>
<td align="right"> </td>
<td align="right"> </td>
<td align="right">2．38</td>
<td align="right">1．62</td>
<td> </td>
<td>363300公里</td>
<td>405500公里</td>
<td> </td>
</tr>
<tr>
<th>序</th>
<th>名称</th>
<th style="font-size:15px;">太阳辐射量<br />
(Ｅ地)</th>
<th>反射率／<br />
最大光度</th>
<th>表面积<br />
(万km^2)</th>
<th>发现年份</th>
<th colspan="5">主要大气成分</th>
</tr>
<tr>
<td> </td>
<td>太阳</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td colspan="5">氢（71％）、氮（27％），氧、碳、氮、氖；硅、铁等</td>
</tr>
<tr>
<td>1</td>
<td>水星</td>
<td>6.674</td>
<td>10.6%/-1.9</td>
<td>4.60亿</td>
<td>5000年前</td>
<td colspan="5">氦42％、钠42％、氧15％</td>
</tr>
<tr>
<td>2</td>
<td>金星</td>
<td>1.911</td>
<td>65.0%/-4.4</td>
<td>——</td>
<td>——</td>
<td colspan="5">二氧化碳97％、氮/氧3％</td>
</tr>
<tr>
<td>3</td>
<td>地球</td>
<td>1.000</td>
<td>37.0%/——</td>
<td>5.10亿</td>
<td>——</td>
<td colspan="5">氮78.1％、氧20.9％、氩0.9％</td>
</tr>
<tr>
<td>4</td>
<td>火星</td>
<td>0.431</td>
<td>15.0%/-2.0</td>
<td>1.43亿</td>
<td>——</td>
<td colspan="5">二氧化碳95.3％、氮2.7％、氩1.6%</td>
</tr>
<tr>
<td>5</td>
<td>木星</td>
<td>0.037</td>
<td>52.0%/-2.7</td>
<td>——</td>
<td>——</td>
<td colspan="5">氢90％、氦10％</td>
</tr>
<tr>
<td>6</td>
<td>土星</td>
<td>0.011</td>
<td>?47.0%/0.67</td>
<td>——</td>
<td>公元前</td>
<td colspan="5">氢、氦</td>
</tr>
<tr>
<td>7</td>
<td>天王星</td>
<td>0.003</td>
<td>?51.0%/5.52</td>
<td>?81.16亿</td>
<td>1781年</td>
<td colspan="5">氢83±3％、氦15±3％、甲烷2.3％</td>
</tr>
<tr>
<td>8</td>
<td>海王星</td>
<td>0.001</td>
<td>41.0%/7.84</td>
<td>——</td>
<td>1846年</td>
<td colspan="5">氢85%、氦13%、甲烷2%</td>
</tr>
<tfoot>
<tr>
<td colspan="11" rowspan="2">备注：地球质量Ｍ地＝5.9742×10^24(千克)；地球体积Ｖ地＝1.0832073×10^12(立方千米)；１天文单位＝1.4960亿公里</td>
</tr>
<tr> </tr>
<tr>
<td colspan="11"></td>
</tr></tfoot>
</table>
</div>
</body>
</html>