Skip to content

Instantly share code, notes, and snippets.

@vinhnx

vinhnx/index.html

Created September 10, 2012 12:53
Show Gist options
  • Save vinhnx/3690751 to your computer and use it in GitHub Desktop.
Save vinhnx/3690751 to your computer and use it in GitHub Desktop.
Download ZIP
Use the controls to switch views. Works better in webkit, buggy in FF, flat in IE. Inspired by http://neography.com/experiment/circles/solarsystem/ and http://nicolasgallagher.com/css-pseudo-element-solar-system/demo/ WIP, I will share the full SASS pro
Raw
index.html
<body class="view-2D zoom-large opening hide-UI">
<h1>3D CSS Solar System</h1>
<div id="subnav" class="sub nav">
<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 class="controls">
<label class="set-view">
<input type="checkbox">
</label>
<label class="set-zoom">
<input type="checkbox">
</label>
<label>
<input type="radio" id="set-speed" name="scale" checked>
<span>Speed</span>
</label>
<label>
<input type="radio" id="set-size" name="scale">
<span>Size</span>
</label>
<label>
<input type="radio" id="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>
</body>
Raw
script.js
$(window).load(function(){
var body = $("body"),
universe = $("#universe"),
solarsys = $("#solar-system");
var init = function() {
body.removeClass('view-2D opening').addClass("view-3D").delay(4000)
.queue(function() {
$(this).removeClass('hide-UI').addClass("set-speed");
$(this).dequeue();
});
};
var setView = function(view) {
universe.removeClass().addClass(view);
};
$(".nav a").click(function(e) {
$(this).parent().find('a').removeClass('active');
$(this).addClass('active');
e.preventDefault();
});
$(".set-view").click(function(e) {
body.toggleClass("view-3D view-2D");
e.preventDefault();
});
$(".set-zoom").click(function(e) {
body.toggleClass("zoom-large zoom-close");
e.preventDefault();
});
$("#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");
});
$(".sub.nav a").click(function(e) {
var ref = $(this).attr("class");
solarsys.removeClass().addClass(ref);
e.preventDefault();
});
init();
});
Raw
style.css
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
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: url("https://dl.dropbox.com/u/7203383/planets/bg-stars.png") #08090a; }
#universe {
z-index: 1;
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
background-image: url("https://dl.dropbox.com/u/7203383/planets/bg-glow.png");
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%; }
/* --------------------------------------------------------------------------- planets and stars styles */
/* --------------------------------------------------------------------------- saturn ring */
#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; }
/* --------------------------------------------------------------------------- images */
#sun {
background-image: url("https://dl.dropbox.com/u/7203383/planets/sun.png"); }
#mercury .planet {
background-image: url("https://dl.dropbox.com/u/7203383/planets/p-mercury.png"); }
#venus .planet {
background-image: url("https://dl.dropbox.com/u/7203383/planets/p-venus.png"); }
#earth .planet {
background-image: url("https://dl.dropbox.com/u/7203383/planets/p-earth.png"); }
#earth .moon {
background-color: white; }
#mars .planet {
background-image: url("https://dl.dropbox.com/u/7203383/planets/p-mars.png"); }
#jupiter .planet {
background-image: url("https://dl.dropbox.com/u/7203383/planets/p-jupiter.png"); }
#saturn .planet {
background-image: url("https://dl.dropbox.com/u/7203383/planets/p-saturn.png"); }
#uranus .planet {
background-image: url("https://dl.dropbox.com/u/7203383/planets/p-uranus.png"); }
#neptune .planet {
background-image: url("https://dl.dropbox.com/u/7203383/planets/p-neptune.png"); }
/* --------------------------------------------------------------------------- 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; }
/* --------------------------------------------------------------------------- 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);
/* RIGHT */ }
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);
/* LEFT */ }
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 0 0 1px rgba(0, 0, 0, 0.5);
/* TOP */ }
50% {
box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
/* RIGHT */ }
75% {
box-shadow: inset -22px -20px 10px rgba(0, 0, 0, 0.5);
/* BOTTOM */ }
75.01% {
box-shadow: inset 22px -20px 10px rgba(0, 0, 0, 0.5);
/* BOTTOM */ }
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 -24px -20px 15px rgba(0, 0, 0, 0.5);
/* BOTTOM */ }
25.01% {
box-shadow: inset 24px -20px 15px rgba(0, 0, 0, 0.5);
/* BOTTOM */ }
50% {
box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
/* LEFT */ }
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);
/* 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);
/* LEFT */ }
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);
/* RIGHT */ }
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 -94px -30px 40px 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);
/* LEFT */ }
75% {
box-shadow: inset 0 3px 2px rgba(0, 0, 0, 0.5);
/* TOP */ }
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 -2px 3px 2px rgba(0, 0, 0, 0.5);
/* TOP */ }
50% {
box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
/* RIGHT */ }
75% {
box-shadow: inset -80px -30px 50px 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);
/* 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 0 0 2px rgba(0, 0, 0, 0.5);
/* TOP */ }
50% {
box-shadow: inset -8px 0 5px rgba(0, 0, 0, 0.5);
/* RIGHT */ }
75% {
box-shadow: inset -40px -15px 40px rgba(0, 0, 0, 0.5);
/* BOTTOM */ }
75.01% {
box-shadow: inset 40px -15px 40px rgba(0, 0, 0, 0.5);
/* BOTTOM */ }
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);
/* RIGHT */ }
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);
/* LEFT */ }
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 */
h1 {
z-index: 2;
position: absolute;
opacity: .7;
width: 100%;
top: 24px;
left: 0px;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: 20px;
text-align: center;
color: white; }
.nav {
z-index: 2;
position: fixed;
width: 100%;
text-align: center; }
.nav a {
position: relative;
display: inline-block;
margin-bottom: 1px;
padding: 10px 15px;
font-size: 14px;
color: rgba(255, 255, 255, 0.5);
font-family: 'Open Sans' !important;
font-style: normal;
font-weight: 300;
text-align: center;
text-decoration: none; }
.nav a:hover {
color: #FFF; }
.nav a.active {
color: #0CF; }
.sub.nav {
bottom: 28px;
left: 0px; }
.sub.nav a {
font-size: 20px; }
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 .nav,
.hide-UI dl.infos,
.hide-UI .controls {
opacity: 0!important;
margin-top: -30px; }
.hide-UI .sub.nav {
margin-bottom: -30px; }
.hide-UI .orbit {
border: 1px solid rgba(255, 255, 255, 0.2) !important; }
.controls {
position: absolute;
opacity: 1;
top: 24px;
right: 28px;
transform-style: preserve-3d;
z-index: 99; }
.controls label {
opacity: .6;
display: block;
position: relative;
height: 24px;
margin-bottom: 28px; }
.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:hover {
opacity: 1; }
.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 .nav,
.opening .sub.nav,
.opening dl.infos,
.opening .controls {
transition-duration: 0s;
transition-delay: 0s; }
.opening .pos {
transition-delay: 0s; }
h1, .nav, .controls {
transition-property: opacity, margin;
transition-duration: .8s;
transition-timing-function: ease-in-out; }
h1 {
transition-delay: .35s; }
.nav {
transition-delay: .7s; }
.sub.nav {
transition-delay: 1.05s; }
.controls {
transition-delay: 1.4s; }
/* --------------------------------------------------------------------------- responsive styles */
@media screen and (min-width: 760px) and (max-width: 999px) {
#universe {
font-size: 58%; } }
@media screen and (min-width: 1000px) and (max-width: 1299px) {
#universe {
font-size: 73%; } }
@media screen and (min-width: 1300px) {
#universe {
font-size: 100%; } }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment