简单版效果图：

八大行星围绕太阳旋转模型3d（CSS动态模拟太阳系八大行星的运行）(1)

背景为八大行星和太阳系的相关数据。

背景和太阳都可以实现单击隐藏、双击显示。

八大行星围绕太阳旋转模型3d（CSS动态模拟太阳系八大行星的运行）(2)

行星的大小和轨道只是粗略地表示了相关关系，但运行的周期（即公转的速度是严格按照其公转周期按比较设置的。（1 month / 3 second）

复杂精确版：

八大行星围绕太阳旋转模型3d（CSS动态模拟太阳系八大行星的运行）(3)

复杂精确版代码：

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://img.studyofnet.comhttp://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>

,