A CodePen by Mark. Solar System - The Solar System in proportional scale using jqueryrotate & Justinaguilar CSS3 Animations http://www.justinaguilar.com/animations/ https://code.google.com/p/jqueryrotate/

index.html

<canvas id="sun" width="2500" height="2000"></canvas>
<canvas id="mercury" class="fadeIn"></canvas>
<canvas id="venus" class="fadeIn"></canvas>
<canvas id="earth" class="fadeIn"></canvas>
<canvas id="mars" class="fadeIn"></canvas>
<canvas id="jupiter" width="800" height="300" class="fadeIn"></canvas>
<canvas id="saturn" width="800" height="300"class="fadeIn"></canvas>
<div id="rings" class="fadeIn"><img src="http://www.markinnes.co.uk/assets/img/ring.png" width="353"/></div>
<canvas id="uranus" class="fadeIn"></canvas>
<canvas id="neptune" class="fadeIn"></canvas>
<canvas id="pluto" class="fadeIn"></canvas>

script.js

var angle1 = 0;
var angle2 = 0;
setInterval(function(){
      angle1-=15;
      angle2+=10;
     $("#mercury,#venus, #earth, #mars, #jupiter,#saturn,#uranus,#neptun,#pluto    ").rotate(angle1);
     $("#sun").rotate(angle2);
},40);

var sun = document.getElementById('sun');
var context = sun.getContext('2d');
var centerX = sun.width / 2;
var centerY = sun.height / 2;
var radius = 980;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
var grd = context.createRadialGradient(238, 50, 10, 238, 50, 300);
grd.addColorStop(0, '#FFFFFF');
grd.addColorStop(1, '#FFFF00');
context.fillStyle = grd;
context.fill();


var mercury = document.getElementById('mercury');
var context = mercury.getContext('2d');
var centerX = mercury.width / 2;
var centerY = mercury.height / 2;
var radius = 3.2;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
var grd = context.createRadialGradient(238, 50, 10, 238, 50, 300);
grd.addColorStop(0, '#999966');
grd.addColorStop(1, '#D4D4BF');
context.fillStyle = grd;
context.fill();


var venus = document.getElementById('venus');
var context = venus.getContext('2d');
var centerX = venus.width / 2;
var centerY = venus.height / 2;
var radius = 8.8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
var grd = context.createRadialGradient(238, 50, 10, 238, 50, 300);
grd.addColorStop(0, '#996600');
grd.addColorStop(1, '#B8944D');
context.fillStyle = grd;
context.fill();


var earth = document.getElementById('earth');
var context = earth.getContext('2d');
var centerX = earth.width / 2;
var centerY = earth.height / 2;
var radius = 9.2;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
var grd = context.createRadialGradient(238, 50, 10, 238, 50, 300);
grd.addColorStop(0, '#004CB3');
grd.addColorStop(1, '#8ED6FF');
context.fillStyle = grd;
context.fill();

var mars = document.getElementById('mars');
var context = mars.getContext('2d');
var centerX = mars.width / 2;
var centerY = mars.height / 2;
var radius = 5.2;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
var grd = context.createRadialGradient(238, 50, 10, 238, 50, 300);
grd.addColorStop(0, '#E01B1B');
grd.addColorStop(1, '#993300');
context.fillStyle = grd;
context.fill();

var jupiter = document.getElementById('jupiter');
var context = jupiter.getContext('2d');
var centerX = jupiter.width / 2;
var centerY = jupiter.height / 2;
var radius = 100;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
var grd = context.createRadialGradient(238, 50, 10, 238, 50, 300);
grd.addColorStop(0, '#FFAD33');
grd.addColorStop(1, '#CC3300');
context.fillStyle = grd;
context.fill();

var saturn = document.getElementById('saturn');
var context = saturn.getContext('2d');
var centerX = saturn.width / 2;
var centerY = saturn.height / 2;
var radius = 84;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
var grd = context.createRadialGradient(238, 50, 10, 238, 50, 300);
grd.addColorStop(0, '#996633');
grd.addColorStop(1, '#ADAD85');
context.fillStyle = grd;
context.fill();

var uranus = document.getElementById('uranus');
var context = uranus.getContext('2d');
var centerX = uranus.width / 2;
var centerY = uranus.height / 2;
var radius = 38;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
var grd = context.createRadialGradient(238, 50, 10, 238, 50, 300);
grd.addColorStop(0, '#009999');
grd.addColorStop(1, '#B2D2D2');
context.fillStyle = grd;
context.fill();

var neptune = document.getElementById('neptune');
var context = neptune.getContext('2d');
var centerX = neptune.width / 2;
var centerY = neptune.height / 2;
var radius = 36;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
var grd = context.createRadialGradient(238, 50, 10, 238, 50, 300);
grd.addColorStop(0, '#3399FF');
grd.addColorStop(1, '#B2D2D2');
context.fillStyle = grd;
context.fill();

var pluto = document.getElementById('pluto');
var context = pluto.getContext('2d');
var centerX = pluto.width / 2;
var centerY = pluto.height / 2;
var radius = 1.8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
var grd = context.createRadialGradient(238, 50, 10, 238, 50, 300);
grd.addColorStop(0, '#3366FF');
grd.addColorStop(1, '#1A4C80');
context.fillStyle = grd;
context.fill();

style.css

body {
background-color: black;
}
#sun {
position:absolute;
top:-800px;
left: -2100px; 
}
#mercury {
position:absolute;
top:100px;
left:25px; 
}
#venus {
position:absolute;
top:100px;
left: 75px; 
}
#earth {
position:absolute;
top:100px;
left: 145px; 
}
#mars {
position:absolute;
top:100px;
left: 230px; 
}
#jupiter {
position:absolute;
top:40px;
left: 145px; 
}
#saturn {
position:absolute;
top:40px;
left: 400px; 
}
#rings { 
position: absolute; 
 top: 100px; left: 621px; 
 -webkit-transform: rotate(1deg);
}
#uranus {
position:absolute;
top:100px;
left: 900px; 
}
#neptune {
position:absolute;
top:100px;
left:1050px; 
}
#pluto {
position:absolute;
top:100px;
left:1150px; 
}