Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Details

Privacy

Go PRO Window blinds lowered to protect code. Code Editor with window blinds (raised) and a light blub turned on.

Keep it secret; keep it safe.

Private Pens are hidden everywhere on CodePen, except to you. You can still share them and other people can see them, they just can't find them through searching or browsing.

Upgrade to PRO

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

Template

Make Template?

Templates are Pens that can be used to start other Pens quickly from the create menu. The new Pen will copy all the code and settings from the template and make a new Pen (that is not a fork). You can view all of your templates, or learn more in the documentation.

Template URL

Any Pen can act as a template (even if you don't flip the toggle above) with a special URL you can use yourself or share with others. Here's this Pen's template URL:

Screenshot

Screenshot or Custom Thumbnail

Screenshots of Pens are shown in mobile browsers, RSS feeds, to users who chose images instead of iframes, and in social media sharing.

This Pen is using the default Screenshot, generated by CodePen. Upgrade to PRO to upload your own thumbnail that will be displayed on previews of this pen throughout the site and when sharing to social media.

Upgrade to PRO

HTML

              
                  <body class="opening hide-UI view-2D zoom-large data-close controls-close">
    <div id="navbar">
      <a id="toggle-data" href="#data"><i class="icon-data"></i>Data</a>
      <h1>3D Solar System<br><span>by <a href="https://twitter.com/JulianGarnier" target="_blank">@JulianGarnier</a></span></h1>
      <a id="toggle-controls" href="#controls"><i class="icon-controls"></i>Controls</a>
    </div>
    <div id="data">
      <a class="sun" title="sun" href="#sunspeed">Sun</a>
      <a class="mercury" title="mercury" href="#mercuryspeed">Mercury</a>
      <a class="venus" title="venus" href="#venusspeed">Venus</a>
      <a class="earth active" title="earth" href="#earthspeed">Earth</a>
      <a class="mars" title="mars" href="#marsspeed">Mars</a>
      <a class="jupiter" title="jupiter" href="#jupiterspeed">Jupiter</a>
      <a class="saturn" title="saturn" href="#saturnspeed">Saturn</a>
      <a class="uranus" title="uranus" href="#uranusspeed">Uranus</a>
      <a class="neptune" title="neptune" href="#neptunespeed">Neptune</a>
    </div>
    <div id="controls">
      <label class="set-view">
        <input type="checkbox">
      </label>
      <label class="set-zoom">
        <input type="checkbox">
      </label>
      <label>
        <input type="radio" class="set-speed" name="scale" checked>
        <span>Speed</span>
      </label>
      <label>
        <input type="radio" class="set-size" name="scale">
        <span>Size</span>
      </label>
      <label>
        <input type="radio" class="set-distance" name="scale">
        <span>Distance</span>
      </label>
    </div>
    <div id="universe" class="scale-stretched">
      <div id="galaxy">
        <div id="solar-system" class="earth">
          <div id="mercury" class="orbit">
            <div class="pos">
              <div class="planet">
                <dl class="infos">
                  <dt>Mercury</dt>
                  <dd><span></span></dd>
                </dl>
              </div>
            </div>
          </div>
          <div id="venus" class="orbit">
            <div class="pos">
              <div class="planet">
                <dl class="infos">
                  <dt>Venus</dt>
                  <dd><span></span></dd>
                </dl>
              </div>
            </div>
          </div>
          <div id="earth" class="orbit">
            <div class="pos">
              <div class="orbit">
                <div class="pos">
                  <div class="moon"></div>
                </div>
              </div>
              <div class="planet">
                <dl class="infos">
                  <dt>Earth</dt>
                  <dd><span></span></dd>
                </dl>
              </div>
            </div>
          </div>
          <div id="mars" class="orbit">
            <div class="pos">
              <div class="planet">
                <dl class="infos">
                  <dt>Mars</dt>
                  <dd><span></span></dd>
                </dl>
              </div>
            </div>
          </div>
          <div id="jupiter" class="orbit">
            <div class="pos">
              <div class="planet">
                <dl class="infos">
                  <dt>Jupiter</dt>
                  <dd><span></span></dd>
                </dl>
              </div>
            </div>
          </div>
          <div id="saturn" class="orbit">
            <div class="pos">
              <div class="planet">
                <div class="ring"></div>
                <dl class="infos">
                  <dt>Saturn</dt>
                  <dd><span></span></dd>
                </dl>
              </div>
            </div>
          </div>
          <div id="uranus" class="orbit">
            <div class="pos">
              <div class="planet">
                <dl class="infos">
                  <dt>Uranus</dt>
                  <dd><span></span></dd>
                </dl>
              </div>
            </div>
          </div>
          <div id="neptune" class="orbit">
            <div class="pos">
              <div class="planet">
                <dl class="infos">
                  <dt>Neptune</dt>
                  <dd><span></span></dd>
                </dl>
              </div>
            </div>
          </div>
          <div id="sun">
            <dl class="infos">
              <dt>Sun</dt>
              <dd><span></span></dd>
            </dl>
          </div>
        </div>
      </div>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script type="text/javascript">
    if (typeof jQuery == 'undefined') { 
      document.write(unescape("%3Cscript src='js/jquery.min.js' type='text/javascript'%3E%3C/script%3E"));
    }
    </script>
    <script src="js/prefixfree.min.js"></script>
    <script src="js/scripts.min.js"></script>
  </body>
              
            
!

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
/*
  Copyright (c) 2012 Julian Garnier
  Licensed under the MIT license
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  box-sizing: border-box; }

body {
  font-size: 10px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  background-color: #08090A; }

#universe {
  z-index: 1;
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-position: center 40%;
  background-repeat: no-repeat;
  background-size: cover; }

#galaxy {
  position: relative;
  width: 100%;
  height: 100%;
  /*perspective: 4000;*/ }

#solar-system {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d; }

.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform-style: preserve-3d;
  animation-name: orbit;
  animation-iteration-count: infinite;
  animation-timing-function: linear; }

.orbit .orbit {
  animation-name: suborbit; }

.pos {
  position: absolute;
  top: 50%;
  width: 2em;
  height: 2em;
  margin-top: -1em;
  margin-left: -1em;
  transform-style: preserve-3d;
  animation-name: invert;
  animation-iteration-count: infinite;
  animation-timing-function: linear; }

#sun, .planet, #earth .moon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  margin-left: -0.5em;
  border-radius: 50%;
  transform-style: preserve-3d; }

#sun {
  background-color: #FB7209;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 0 60px rgba(255, 160, 60, 0.4); }

.planet {
  background-color: #202020;
  background-repeat: no-repeat;
  background-size: cover;
  animation-iteration-count: infinite;
  animation-timing-function: linear; }

.ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%; }

#saturn .ring {
  width: 2em;
  height: 2em;
  margin-top: -1em;
  margin-left: -1em;
  border: 0.3em solid rgba(160, 147, 130, 0.7);
  animation-iteration-count: infinite;
  animation-timing-function: linear; }

#saturn .ring:after {
  border-radius: 50%;
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  width: 2.2em;
  height: 2.2em;
  margin-top: -1.1em;
  margin-left: -1.1em;
  border: 0.07em solid rgba(160, 147, 130, 0.5);
  box-sizing: border-box;
  box-sizing: border-box; }

/* --------------------------------------------------------------------------- planets index */
#mercury {
  z-index: 10; }

#venus {
  z-index: 9; }

#earth {
  z-index: 8; }

#moon {
  z-index: 7; }

#mars {
  z-index: 6; }

#jupiter {
  z-index: 5; }

#saturn {
  z-index: 4; }

#uranus {
  z-index: 3; }

#neptune {
  z-index: 2; }

#sun {
  z-index: 1; }

/* --------------------------------------------------------------------------- animations */
@keyframes orbit {
  0% {
    transform: rotateZ(0deg); }

  100% {
    transform: rotateZ(-360deg); } }

@keyframes suborbit {
  0% {
    transform: rotateX(90deg) rotateZ(0deg); }

  100% {
    transform: rotateX(90deg) rotateZ(-360deg); } }

@keyframes invert {
  0% {
    transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg); }

  100% {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg); } }

/* --------------------------------------------------------------------------- opening */
.view-3D .opening #sun,
.view-3D .opening .orbit,
.view-3D .opening .pos,
.view-3D .opening .planet,
.view-3D .opening .satelite,
.view-3D .opening .ring {
  transition-duration: 4s; }

#universe.opening #sun {
  box-shadow: 0 0 0 rgba(255, 160, 60, 0); }

/* --------------------------------------------------------------------------- 2D view */
.view-2D.zoom-large #sun {
  transform-style: flat; }

.view-2D.zoom-large .orbit {
  transform-style: flat; }

.view-2D #sun,
.view-2D .ring {
  transform: rotateX(0deg); }

.view-2D .planet,
.view-2D .moon {
  transform: rotateX(90deg); }

/* --------------------------------------------------------------------------- 3D view */
.view-3D.zoom-large #sun {
  transform-style: preserve-3d; }

.view-3D.zoom-large .orbit {
  transform-style: preserve-3d; }

.view-3D #solar-system {
  transform: rotateX(75deg); }

.view-3D #sun {
  transform: rotateX(-90deg); }

.view-3D .ring {
  transform: rotateX(90deg); }

.view-3D .planet,
.view-3D .moon {
  transform: rotateX(0deg); }

/* --------------------------------------------------------------------------- large zoom */
.zoom-large #solar-system {
  width: 100%; }

.zoom-large.view-2D .scale-stretched #solar-system {
  font-size: 26%; }

.zoom-large.view-3D .scale-stretched #solar-system {
  font-size: 62%; }

.zoom-large.view-2D .scale-d #solar-system {
  font-size: 22%; }

.zoom-large.view-3D .scale-d #solar-system {
  font-size: 48%; }

.zoom-large.view-2D .scale-s #solar-system {
  font-size: 7%; }

.zoom-large.view-3D .scale-s #solar-system {
  font-size: 14%; }

/* --------------------------------------------------------------------------- close zoom */
.zoom-close #solar-system {
  width: 200%;
  font-size: 100%; }

.zoom-close .scale-stretched #solar-system {
  margin-left: -100%; }

.zoom-close .scale-d #solar-system {
  margin-left: -106%; }

.zoom-close.view-2D .scale-d #solar-system {
  font-size: 84%; }

.zoom-close.view-3D .scale-d #solar-system {
  font-size: 84%; }

.zoom-close .scale-s #solar-system {
  margin-left: -145%; }

.zoom-close.view-2D .scale-s #solar-system {
  font-size: 40%; }

.zoom-close.view-3D .scale-s #solar-system {
  font-size: 40%; }

.zoom-close .orbit,
.zoom-close .pos,
.zoom-close .planet,
.zoom-close .satelite,
.zoom-close .ring {
  animation-play-state: paused!important;
  animation-duration: 0s!important;
  animation: none!important; }

.zoom-close.view-2D .planet,
.zoom-close.view-2D .moon {
  transform: rotateX(0deg); }

.zoom-close.view-3D .planet {
  transform: rotateX(-90deg); }

.zoom-close.view-3D .moon {
  transform: rotateX(90deg); }

.zoom-close .pos {
  left: 100%!important;
  top: 50%!important; }

/* --------------------------------------------------------------------------- data */
/* --------------------------------------------------------------------------- speed */
/* sideral years */
#mercury .pos,
#mercury .planet,
#mercury.orbit {
  animation-duration: 2.89016s; }

#venus .pos,
#venus .planet,
#venus.orbit {
  animation-duration: 7.38237s; }

#earth .pos,
#earth .planet,
#earth.orbit {
  animation-duration: 12.00021s; }

#earth .orbit .pos,
#earth .orbit {
  animation-duration: 0.89764s; }

#mars .pos,
#mars .planet,
#mars.orbit {
  animation-duration: 22.57017s; }

#jupiter .pos,
#jupiter .planet,
#jupiter.orbit {
  animation-duration: 142.35138s; }

#saturn .pos,
#saturn .planet,
#saturn.orbit,
#saturn .ring {
  animation-duration: 353.36998s; }

#uranus .pos,
#uranus .planet,
#uranus.orbit {
  animation-duration: 1008.20215s; }

#neptune .pos,
#neptune .planet,
#neptune.orbit {
  animation-duration: 1977.49584s; }

/* --------------------------------------------------------------------------- planets sizes */
/* --------------------------------------------------------------------------- stretched sizes */
.scale-stretched #sun {
  font-size: 24em; }

.scale-stretched #mercury .planet {
  font-size: 1.5em; }

.scale-stretched #venus .planet {
  font-size: 3.72em; }

.scale-stretched #earth .planet {
  font-size: 3.92em; }

.scale-stretched #earth .moon {
  font-size: 1.2em; }

.scale-stretched #mars .planet {
  font-size: 2.9em; }

.scale-stretched #jupiter .planet {
  font-size: 12em; }

.scale-stretched #saturn .planet {
  font-size: 10.8em; }

.scale-stretched #uranus .planet {
  font-size: 4.68em; }

.scale-stretched #neptune .planet {
  font-size: 4.9em; }

/* --------------------------------------------------------------------------- scaled sizes */
/*
(planets radius * 2) * ratio
*/
/*$distanceScaleRatio:   0.000075em;*/
/* --------------------------------------------------------------------------- planets distance scale sizes */
.scale-d #sun {
  font-size: 41.73048em; }

.scale-d #mercury .planet {
  font-size: 0.14634em; }

.scale-d #venus .planet {
  font-size: 0.36306em; }

.scale-d #earth .planet {
  font-size: 0.38226em; }

.scale-d #earth .moon {
  font-size: 0.08226em; }

.scale-d #mars .planet {
  font-size: 0.20334em; }

.scale-d #jupiter .planet {
  font-size: 4.19466em; }

.scale-d #saturn .planet {
  font-size: 3.49392em; }

.scale-d #uranus .planet {
  font-size: 1.52172em; }

.scale-d #neptune .planet {
  font-size: 1.47732em; }

/* --------------------------------------------------------------------------- planet size scale sizes */
.scale-s #sun {
  font-size: 417.3048em; }

.scale-s #mercury .planet {
  font-size: 1.4634em; }

.scale-s #venus .planet {
  font-size: 3.6306em; }

.scale-s #earth .planet {
  font-size: 3.8226em; }

.scale-s #earth .moon {
  font-size: 0.8226em; }

.scale-s #mars .planet {
  font-size: 2.0334em; }

.scale-s #jupiter .planet {
  font-size: 41.9466em; }

.scale-s #saturn .planet {
  font-size: 34.9392em; }

.scale-s #uranus .planet {
  font-size: 15.2172em; }

.scale-s #neptune .planet {
  font-size: 14.7732em; }

/* --------------------------------------------------------------------------- stretched orbits */
.scale-stretched #mercury.orbit {
  width: 32em;
  height: 32em;
  margin-top: -16em;
  margin-left: -16em; }

.scale-stretched #venus.orbit {
  width: 40em;
  height: 40em;
  margin-top: -20em;
  margin-left: -20em; }

.scale-stretched #earth.orbit {
  width: 56em;
  height: 56em;
  margin-top: -28em;
  margin-left: -28em; }

.scale-stretched #earth .orbit {
  width: 6em;
  height: 6em;
  margin-top: -3em;
  margin-left: -3em; }

.scale-stretched #mars.orbit {
  width: 72em;
  height: 72em;
  margin-top: -36em;
  margin-left: -36em; }

.scale-stretched #jupiter.orbit {
  width: 100em;
  height: 100em;
  margin-top: -50em;
  margin-left: -50em; }

.scale-stretched #saturn.orbit {
  width: 150em;
  height: 150em;
  margin-top: -75em;
  margin-left: -75em; }

.scale-stretched #uranus.orbit {
  width: 186em;
  height: 186em;
  margin-top: -93em;
  margin-left: -93em; }

.scale-stretched #neptune.orbit {
  width: 210em;
  height: 210em;
  margin-top: -105em;
  margin-left: -105em; }

/* --------------------------------------------------------------------------- scaled orbits */
/* --------------------------------------------------------------------------- distance scale orbits */
.scale-d #mercury.orbit {
  width: 44.74176em;
  height: 44.74176em;
  margin-top: -22.37088em;
  margin-left: -22.37088em; }

.scale-d #venus.orbit {
  width: 47.35737em;
  height: 47.35737em;
  margin-top: -23.67869em;
  margin-left: -23.67869em; }

.scale-d #earth.orbit {
  width: 49.50959em;
  height: 49.50959em;
  margin-top: -24.75479em;
  margin-left: -24.75479em; }

.scale-d #mars.orbit {
  width: 53.58356em;
  height: 53.58356em;
  margin-top: -26.79178em;
  margin-left: -26.79178em; }

.scale-d #jupiter.orbit {
  width: 82.2042em;
  height: 82.2042em;
  margin-top: -41.1021em;
  margin-left: -41.1021em; }

.scale-d #saturn.orbit {
  width: 115.91713em;
  height: 115.91713em;
  margin-top: -57.95857em;
  margin-left: -57.95857em; }

.scale-d #uranus.orbit {
  width: 191.00471em;
  height: 191.00471em;
  margin-top: -95.50235em;
  margin-left: -95.50235em; }

.scale-d #neptune.orbit {
  width: 275.64709em;
  height: 275.64709em;
  margin-top: -137.82355em;
  margin-left: -137.82355em; }

/* Moon */
.scale-d #earth .orbit {
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  margin-left: -0.5em; }

/* --------------------------------------------------------------------------- size scale orbits */
.scale-s #mercury.orbit {
  width: 441.3048em;
  height: 441.3048em;
  margin-top: -220.6524em;
  margin-left: -220.6524em; }

.scale-s #venus.orbit {
  width: 457.3048em;
  height: 457.3048em;
  margin-top: -228.6524em;
  margin-left: -228.6524em; }

.scale-s #earth.orbit {
  width: 473.3048em;
  height: 473.3048em;
  margin-top: -236.6524em;
  margin-left: -236.6524em; }

.scale-s #mars.orbit {
  width: 489.3048em;
  height: 489.3048em;
  margin-top: -244.6524em;
  margin-left: -244.6524em; }

.scale-s #jupiter.orbit {
  width: 561.3048em;
  height: 561.3048em;
  margin-top: -280.6524em;
  margin-left: -280.6524em; }

.scale-s #saturn.orbit {
  width: 705.3048em;
  height: 705.3048em;
  margin-top: -352.6524em;
  margin-left: -352.6524em; }

.scale-s #uranus.orbit {
  width: 817.3048em;
  height: 817.3048em;
  margin-top: -408.6524em;
  margin-left: -408.6524em; }

.scale-s #neptune.orbit {
  width: 881.3048em;
  height: 881.3048em;
  margin-top: -440.6524em;
  margin-left: -440.6524em; }

/* Moon */
.scale-s #earth .orbit {
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  margin-left: -0.5em; }

/* --------------------------------------------------------------------------- text infos data */
/* --------------------------------------------------------------------------- speed */
.set-speed dl.infos dd span:after {
  content: 'Orbit Velocity'; }

.set-speed #sun dl.infos dd:after {
  content: '0 km/h'; }

.set-speed #mercury dl.infos dd:after {
  content: '170,503 km/h'; }

.set-speed #venus dl.infos dd:after {
  content: '126,074 km/h'; }

.set-speed #earth dl.infos dd:after {
  content: '107,218 km/h'; }

.set-speed #mars dl.infos dd:after {
  content: '86,677 km/h'; }

.set-speed #jupiter dl.infos dd:after {
  content: '47,002 km/h'; }

.set-speed #saturn dl.infos dd:after {
  content: '34,701 km/h'; }

.set-speed #uranus dl.infos dd:after {
  content: '24,477 km/h'; }

.set-speed #neptune dl.infos dd:after {
  content: '19,566 km/h'; }

/* --------------------------------------------------------------------------- size */
.set-size dl.infos dd span:after {
  content: 'Equatorial Circumference'; }

.set-size #sun dl.infos dd:after {
  content: '4,370,005 km'; }

.set-size #mercury dl.infos dd:after {
  content: '15,329 km'; }

.set-size #venus dl.infos dd:after {
  content: '38,024 km'; }

.set-size #earth dl.infos dd:after {
  content: '40,030 km'; }

.set-size #mars dl.infos dd:after {
  content: '21,296 km'; }

.set-size #jupiter dl.infos dd:after {
  content: '439,263 km'; }

.set-size #saturn dl.infos dd:after {
  content: '365,882 km'; }

.set-size #uranus dl.infos dd:after {
  content: '159,354 km'; }

.set-size #neptune dl.infos dd:after {
  content: '154,704 km'; }

/* --------------------------------------------------------------------------- distance */
.set-distance dl.infos dd span:after {
  content: 'From Sun'; }

.set-distance #sun dl.infos dd span:after {
  content: 'From Earth'; }

.set-distance #sun dl.infos dd:after {
  content: '149,598,262 km'; }

.set-distance #mercury dl.infos dd:after {
  content: '57,909,227 km'; }

.set-distance #venus dl.infos dd:after {
  content: '108,209,475 km'; }

.set-distance #earth dl.infos dd:after {
  content: '149,598,262 km'; }

.set-distance #mars dl.infos dd:after {
  content: '227,943,824 km'; }

.set-distance #jupiter dl.infos dd:after {
  content: '778,340,821 km'; }

.set-distance #saturn dl.infos dd:after {
  content: '1,426,666,422 km'; }

.set-distance #uranus dl.infos dd:after {
  content: '2,870,658,186 km'; }

.set-distance #neptune dl.infos dd:after {
  content: '4,498,396,441 km'; }

/* --------------------------------------------------------------------------- planets starting position and lighting effect */
/* --------------------------------------------------------------------------- mercury ; pos: Top */
#mercury .pos {
  left: 50%;
  top: -1%; }

#mercury .planet {
  animation-name: shadow-mercury; }

@keyframes shadow-mercury {
  0% {
    box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
    /* TOP */ }

  25% {
    box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
    /* LEFT */ }

  50% {
    box-shadow: inset 13px -5px 4px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }

  50.01% {
    box-shadow: inset -13px -5px 4px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }

  75% {
    box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }

  100% {
    box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
    /* TOP */ } }

.scaled.view-2D #mercury .planet,
.scaled.view-3D #mercury .planet {
  box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
  /* RIGHT */ }

/* --------------------------------------------------------------------------- venus ; pos: Left */
#venus .pos {
  left: 0;
  top: 50%; }

#venus .planet {
  animation-name: shadow-venus; }

@keyframes shadow-venus {
  0% {
    box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
    /* LEFT */ }

  25% {
    box-shadow: inset 22px -20px 10px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }

  25.5% {
    box-shadow: inset -22px -20px 10px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }

  50% {
    box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }

  75% {
    box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
    /* TOP */ }

  100% {
    box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
    /* LEFT */ } }

.scaled.view-2D #venus .planet,
.scaled.view-3D #venus .planet {
  box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
  /* RIGHT */ }

/* --------------------------------------------------------------------------- earth ; pos: Right */
#earth .pos {
  left: 100%;
  top: 50%; }

#earth .planet {
  animation-name: shadow-earth; }

@keyframes shadow-earth {
  0% {
    box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }

  25% {
    box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
    /* TOP */ }

  50% {
    box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
    /* LEFT */ }

  75% {
    box-shadow: inset 24px -20px 15px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }

  75.01% {
    box-shadow: inset -24px -20px 15px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }

  100% {
    box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
    /* RIGHT */ } }

.scaled.view-2D #earth .planet,
.scaled.view-3D #earth .planet {
  box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
  /* RIGHT */ }

/* --------------------------------------------------------------------------- moon */
#earth .orbit .pos {
  left: 100%;
  top: 50%; }

/* --------------------------------------------------------------------------- mars ; pos: Bottom */
#mars .pos {
  left: 50%;
  top: 100%; }

#mars .planet {
  animation-name: shadow-mars; }

@keyframes shadow-mars {
  0% {
    box-shadow: inset -18px -10px 10px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }

  25% {
    box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }

  50% {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
    /* TOP */ }

  75% {
    box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
    /* LEFT */ }

  99.99% {
    box-shadow: inset 18px -10px 10px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }

  100% {
    box-shadow: inset -18px -10px 10px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ } }

.scaled.view-2D #mars .planet,
.scaled.view-3D #mars .planet {
  box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
  /* RIGHT */ }

/* --------------------------------------------------------------------------- jupiter ; pos: Right */
#jupiter .pos {
  left: 100%;
  top: 50%; }

#jupiter .planet {
  animation-name: shadow-jupiter; }

@keyframes shadow-jupiter {
  0% {
    box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }

  25% {
    box-shadow: inset 0 3px 2px rgba(0, 0, 0, 0.5);
    /* TOP */ }

  50% {
    box-shadow: inset 16px 0 5px rgba(0, 0, 0, 0.5);
    /* LEFT */ }

  75% {
    box-shadow: inset 94px -30px 40px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }

  75.01% {
    box-shadow: inset -94px -30px 40px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }

  100% {
    box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
    /* RIGHT */ } }

.scaled.view-2D #jupiter .planet,
.scaled.view-3D #jupiter .planet {
  box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
  /* RIGHT */ }

/* --------------------------------------------------------------------------- saturn ; pos: Left */
#saturn .pos {
  left: 0%;
  top: 50%; }

#saturn .planet {
  animation-name: shadow-saturn; }

@keyframes shadow-saturn {
  0% {
    box-shadow: inset 16px 0 5px rgba(0, 0, 0, 0.5);
    /* LEFT */ }

  25% {
    box-shadow: inset 80px -30px 50px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }

  25.01% {
    box-shadow: inset -94px -30px 40px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }

  50% {
    box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }

  75% {
    box-shadow: inset -2px 3px 2px rgba(0, 0, 0, 0.5);
    /* TOP */ }

  100% {
    box-shadow: inset 16px 0 5px rgba(0, 0, 0, 0.5);
    /* LEFT */ } }

.scaled.view-2D #saturn .planet,
.scaled.view-3D #saturn .planet {
  box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
  /* RIGHT */ }

/* --------------------------------------------------------------------------- saturn ring */
/*

#saturn .ring           { animation-name:     shadow-saturn-ring; }

@keyframes 
shadow-saturn-ring{ 0%   { box-shadow: inset -16px  0      4px   rgba(20, 40, 50, 0.45); opacity: .4; }
                  25%    { box-shadow: inset -5px   -30px   12px  rgba(20, 40, 50, 0.3);  opacity: 1; }
                  25.01% { box-shadow: inset 5px    -30px   12px  rgba(20, 40, 50, 0.3);  opacity: 1; }
                  50%    { box-shadow: inset 16px   0      4px   rgba(20, 40, 50, 0.45);  opacity: .4; }
                  75%    { box-shadow: inset 0      30px  50px  rgba(20, 40, 50, 0);  opacity: .3; }
                  100%   { box-shadow: inset -16px  0      4px   rgba(20, 40, 50, 0.45);  opacity: .4; }
                }

.scaled.view-2D #saturn .ring,
.scaled.view-3D #saturn .ring { box-shadow: inset 16px   0      4px   rgba(20, 40, 50, 0.6); }

*/
/* --------------------------------------------------------------------------- uranus ; pos: Left */
#uranus .pos {
  left: 0;
  top: 50%; }

#uranus .planet {
  animation-name: shadow-uranus; }

@keyframes shadow-uranus {
  0% {
    box-shadow: inset 8px 0 5px rgba(0, 0, 0, 0.5);
    /* LEFT */ }

  25% {
    box-shadow: inset 40px -15px 40px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }

  25.01% {
    box-shadow: inset -40px -15px 40px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }

  50% {
    box-shadow: inset -8px 0 5px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }

  75% {
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
    /* TOP */ }

  100% {
    box-shadow: inset 8px 0 5px rgba(0, 0, 0, 0.5);
    /* LEFT */ } }

.scaled.view-2D #uranus .planet,
.scaled.view-3D #uranus .planet {
  box-shadow: inset -8px 0 5px rgba(0, 0, 0, 0.5);
  /* RIGHT */ }

/* --------------------------------------------------------------------------- neptune ; pos: Top */
#neptune .pos {
  left: 50%;
  top: 0; }

#neptune .planet {
  animation-name: shadow-neptune; }

@keyframes shadow-neptune {
  0% {
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
    /* TOP */ }

  25% {
    box-shadow: inset 12px 0 5px rgba(0, 0, 0, 0.5);
    /* LEFT */ }

  50% {
    box-shadow: inset 50px -15px 40px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }

  50.01% {
    box-shadow: inset -50px -15px 40px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }

  75% {
    box-shadow: inset -12px 0 5px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }

  100% {
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
    /* TOP */ } }

.scaled.view-2D #neptune .planet,
.scaled.view-3D #neptune .planet {
  box-shadow: inset -12px 0 5px rgba(0, 0, 0, 0.5);
  /* RIGHT */ }

/* --------------------------------------------------------------------------- DEBUG 
.pos, 
.planet, 
.orbit,
.ring { animation-duration: 20s!important; }

/* */
/* --------------------------------------------------------------------------- navigation styles */
dl.infos {
  position: absolute;
  display: block;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin-top: -90%;
  margin-left: 90%;
  padding-left: 100%;
  transform-origin: 100% 100%;
  transform-style: preserve-3d;
  transform: rotateX(90deg); }

dl.infos:before {
  position: absolute;
  content: '';
  width: 15px;
  height: 30px;
  left: 15px;
  bottom: 0;
  border-top: 1px solid white;
  border-left: 1px solid white;
  transform-style: preserve-3d;
  transform: skew(-45deg, 0deg);
  box-shadow: inset 1px 1px black; }

dl.infos dt {
  position: absolute;
  left: 50px;
  margin-bottom: 26px;
  bottom: 30px;
  color: #FFF;
  font-size: 14px;
  text-shadow: 1px 1px 2px black; }

dl.infos dd:after {
  position: absolute;
  left: 50px;
  bottom: 30px;
  width: 300px;
  color: #FFF;
  font-size: 22px;
  text-shadow: 1px 1px 2px black; }

dl.infos dd span:after {
  position: absolute;
  left: 50px;
  bottom: 14px;
  width: 300px;
  color: #FFF;
  font-size: 11px;
  text-shadow: 1px 1px 2px black; }

.sun #sun .infos,
.mercury #mercury .infos,
.venus #venus .infos,
.earth #earth .infos,
.mars #mars .infos,
.jupiter #jupiter .infos,
.saturn #saturn .infos,
.uranus #uranus .infos,
.neptune #neptune .infos {
  display: block;
  opacity: 1;
  transform: rotateX(0deg); }

.mercury #mercury.orbit,
.venus #venus.orbit,
.earth #earth.orbit,
.mars #mars.orbit,
.jupiter #jupiter.orbit,
.saturn #saturn.orbit,
.uranus #uranus.orbit,
.neptune #neptune.orbit {
  border: 1px solid rgba(255, 255, 255, 0.8); }

.hide-UI h1,
.hide-UI #data,
.hide-UI dl.infos,
.hide-UI #controls {
  opacity: 0!important;
  margin-top: -30px; }

.hide-UI #data {
  margin-bottom: -30px; }

.hide-UI .orbit {
  border: 1px solid rgba(255, 255, 255, 0.2) !important; }

h1 {
  width: 100%;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  color: rgba(255, 255, 255, 0.8); }

h1 span, #navbar h1 a {
  display: inline;
  position: relative;
  padding: 0;
  font-weight: 300;
  font-size: 14px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5); }
}

#navbar, #controls, #data {
  background: rgba(0, 0, 0, 0.4); }

#navbar {
  z-index: 99;
  position: absolute;
  top: 0;
  left: 0;
  padding: 16px;
  width: 100%;
  height: 48px; }

#navbar a, #data a, #controls label {
  color: rgba(255, 255, 255, 0.6);
  display: block;
  position: relative;
  text-decoration: none; }

#navbar a:hover, #data a:hover, #controls label:hover {
  color: #FFF; }

#data a.active {
  color: #0CF; }

#navbar a {
  position: absolute;
  top: 0;
  height: 48px;
  padding: 16px;
  font-size: 14px; }

#toggle-data {
  left: 0; }

#toggle-controls {
  right: 0; }

#data, #controls {
  z-index: 99;
  position: fixed;
  opacity: 1;
  top: 49px;
  padding: 16px; }

.data-close #data {
  left: -100%; }

.data-open #data {
  left: 0px; }

.controls-close #controls {
  right: -100%; }

.controls-open #controls {
  right: 0px; }

#data a {
  margin-bottom: 1px;
  padding: 6px 10px;
  font-size: 18px; }

#controls label {
  opacity: .6;
  height: 24px;
  margin-bottom: 28px; }

#controls label:hover {
  opacity: 1; }

#controls label:before {
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  text-align: center;
  color: #FFF;
  z-index: 99; }

#controls label span {
  display: block;
  margin-left: 36px;
  padding-top: 4px;
  font-size: 18px;
  color: #FFF; }

#controls input {
  display: block;
  appearance: none; }

#controls input[type="radio"]:before {
  content: '';
  display: block;
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid #FFF;
  border-radius: 16px; }

#controls input:checked[type="radio"]:after {
  content: '';
  display: block;
  top: 3px;
  margin-left: 3px;
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: #FFF;
  z-index: 99; }

#controls input[type="checkbox"]:before {
  content: '';
  display: block;
  position: absolute;
  width: 100px;
  height: 22px;
  border: 2px solid #FFF;
  border-radius: 16px; }

#controls input[type="checkbox"]:after {
  content: '';
  display: block;
  top: 3px;
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: #FFF;
  z-index: 99; }

#controls label.set-view:before {
  font: bold small-caps 11px/20px sans-serif; }

.view-3D #controls label.set-view:before {
  content: '2D';
  margin-left: 82px; }

.view-2D #controls label.set-view:before {
  content: '3D';
  margin-left: 7px; }

.view-3D #controls .set-view input:after {
  margin-left: 3px; }

.view-2D #controls .set-view input:after {
  margin-left: 81px; }

#controls label.set-zoom:before {
  font: normal small-caps 18px/14px sans-serif; }

.zoom-large #controls label.set-zoom:before {
  content: '+';
  margin-left: 82px; }

.zoom-close #controls label.set-zoom:before {
  content: '-';
  margin-left: 7px; }

.zoom-large #controls .set-zoom input:after {
  margin-left: 3px; }

.zoom-close #controls .set-zoom input:after {
  margin-left: 81px; }

/* --------------------------------------------------------------------------- transitions */
.pos {
  transition-property: top, left; }

#solar-system, .orbit,
.planet,
.satelite,
.ring {
  transition-property: width, height, top, left, margin-left, margin-top, webkit-transform; }

#sun, .icon {
  transition-property: width, height, webkit-transform; }

#solar-system,
#sun,
.orbit,
.pos,
.planet,
.satelite,
.ring,
.infos,
.icon {
  transition-duration: .8s;
  transition-timing-function: ease-in-out; }

#solar-system,
#sun,
.planet,
.satelite,
.ring {
  transition-delay: 0s; }

.pos {
  transition-delay: 1s; }

.opening #solar-system,
.opening #sun,
.opening .orbit,
.opening .pos,
.opening .planet,
.opening .satelite,
.opening .ring,
.opening .infos,
.opening h1,
.opening #data,
.opening dl.infos,
.opening #controls {
  transition-duration: 0s;
  transition-delay: 0s; }

.opening .pos {
  transition-delay: 0s; }

h1, #data, #controls {
  transition-property: opacity, margin;
  transition-duration: .8s;
  transition-timing-function: ease-in-out; }

h1 {
  transition-delay: .35s; }

#data {
  transition-delay: .7s; }

#controls {
  transition-delay: 1s; }

/* --------------------------------------------------------------------------- images */
body {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsBAMAAACLU5NGAAAABGdBTUEAALGPC/xhBQAAADBQTFRFYmJhPz8/Li4uIyMjGxsaFBQUEBAQDQwMCgoKBwcHBAQDBQUFAwMCAgIBAQEAAAAA26JuQQAAgw5JREFUeNo8vGtwW8eZLYqcO6fu3/iRzDn/4kfs5NzHiSNLsjNz7kxiS5byrNh6+pWKLUqinzWxJZF63oktkiAlsc6xROKNqhnLEkAAu24mlgmSAKruxLYA7sePiS0C2Ht31Z3EIoC9u6vusSViY3f3XQ3Nuaw4ki0K3Lv76+9b31rr64jtGDphoWnIyVNSOCbpj0vZNfhCXVuWwtJy2ucvMJ/6vm83Gk+8abfcjw4TWzLPdJlgUjbkICulNATjTHJH+g4VFo+7UvoMn7dQpF7NlaHGqUupT2mN0D/NdqTFpbWWEa7jr07MCj+WFcUP9wtH2ibdmLVjEd92dWF2rTazhUsdx+1FKRWiR1Y/f9zXqS35ez+gpihR37mqSZENNOlQU9JmkgjfyXezgghBpc1kPc3Uo0nRrjJKGTcoPpB5npVecfr+gBGXEOK8Qdl7p7q0YAu/U/EddumVqxkpA+KaaydtO88rt/dLsxmxHZIUwvVH0rJB8RyyHS81mEdqtd/9h6Jf5NnrsdekS6s+5162Ixqi1HnFwlIMDmakCKe6Wv++n/kuDZ3i22ccN3CpKz/K2C4nvYSDNTZzg4yP1RxwfID6elaw+aS0Ps+G7HrSsY33fso5pVKYTme82h/J+F99W4hOxJBWEW8YjsxobneJCNpa8humIDX58XP5IhWZ+Yw83rcE3pQEz2Sa0u+dx48RPEqY6Exp4VeR/2xIXuxkLp7PCFMKj9x4lTqcdYvUdWkgGwIbKgLJHM6Jw1c8C6tA5i4EKSmvZ7z1WcH9HBHt0vVxtzOZYLefclqxCF3bi4WXMu6axLb4NLaRCYPqwUEihcaJFTidLR3q+twP1r9/yl9mwWQaPwfRNJ/pFUpB5/4LpQ/SS05wyGU8RfGE3WgJu8OJxMYve5kAn+9T6XPbxIqtZwkvW7RZqUfN0tWs+i7Pi9W6uijYxHf8d3akfXchYn+42aJ4LCrxqfKTx2yCDzFkf21TzR+MNYguRXm/CPFUvCknaPdgtv7MfuljBeTLL3TlgtAkZy+/IKxbD2a4JXOM5ouylTeFwLM7+vlBlqrfpGIN8ZuHGWu++4brjbOQhEvLTrpV8i3X4bbunL2QqzLmyLVvfcMlTEbs9mHPcJk0wqUSdz/cqmORbESx3O2ulQ9rPHT1oix1hQoNEQoeJ62z53DeXMknZjkrMzsskLd+FZY2thG+cCi+vOTOnxAVA6+GpzHenRVE/Sb+tKDvPuYnyu+PpknS4EWPfZQh0mO02pJd2d51cqSUlLqY//5jQrueiSwzuqAeS/JyJrS60RXJ8G25krB6l0+sdPYQP9X67NkGVbHlh30iuSsRLdx2Q9MXmu8zwzOv1hi3wqa2sWk2NiMv3v2cbvYSWHWffes/+Wr9uXugQThiL/xs5NWsPkVaefH2fnwUL1ldNnG89NH0QX8MCaed2ThZ+mA0IpvTwkGGkdQu2q7sV4QRTpGc9sHJMJ4NPr+nSKT/3s+oi2/wpd1xacvkyyXBbId19W6UtVxXtpD3+tMyVvS2kXhFbNz3cGhejzKcRPbIDxBn2HCLIUyoZGJu4lTCnciImPXuc/0pNvciaYm3X2GD6WR+xWbIM//4uLw6E2Ef7sD6yJAQWyBBLFjC2ThYLNLf7ySVir/2FK/13/jiAjO1VmjJgaCcha7BeloryhDFkyYTYS1kXcc++2g2dDXblj3t4/03q83JzPAkCmaZ+Gk
              
            
!

JS

              
                $(window).load(function(){

  var body = $("body"),
      universe = $("#universe"),
      solarsys = $("#solar-system");

  var init = function() {
    body.removeClass('view-2D opening').addClass("view-3D").delay(2000).queue(function() {
      $(this).removeClass('hide-UI').addClass("set-speed");
      $(this).dequeue();
    });
  };

  var setView = function(view) { universe.removeClass().addClass(view); };

  $("#toggle-data").click(function(e) {
    body.toggleClass("data-open data-close");
    e.preventDefault();
  });

  $("#toggle-controls").click(function(e) {
    body.toggleClass("controls-open controls-close");
    e.preventDefault();
  });

  $("#data a").click(function(e) {
    var ref = $(this).attr("class");
    solarsys.removeClass().addClass(ref);
    $(this).parent().find('a').removeClass('active');
    $(this).addClass('active');
    e.preventDefault();
  });

  $(".set-view").click(function() { body.toggleClass("view-3D view-2D"); });
  $(".set-zoom").click(function() { body.toggleClass("zoom-large zoom-close"); });
  $(".set-speed").click(function() { setView("scale-stretched set-speed"); });
  $(".set-size").click(function() { setView("scale-s set-size"); });
  $(".set-distance").click(function() { setView("scale-d set-distance"); });

  init();

});
              
            
!
999px
💕 I'm the CSS to your HTML.

Console