Il sistema solare in CSS e Webkit

Posso vedere il risultato a questo link
Posso scaricare i files a questo link

Note: Questo toutorials funziona solo con i browsers che supportano il "web kit" ( testato con successo su Chrome, e Safari)

WebKit è un motore di rendering per browser web utilizzato per il rendering delle pagine web. Originariamente sviluppato da Apple, nel 2005 è stato reso open source.

Con il web kit possiamo far muovere gli oggetti nello schermo del nostro browser come si faceva con falsh.
Nel toutorial "ALBUM FOTOGRAFICO IN ASP DALLE IMMAGINI IN UNA CARTELLA CON FORMATTAZIONE IN CSS" abbiamo visto come scalare e ruotare le dei div con il web kit; adesso vediamo come muoverli.

Nel nostro file css scriviamo due identificatori uno rappresenta il pianeta terra e l'altro rappresenta "l'orbita".

#terra{ position:absolute; top:0; left:0; width:40px; height:40px; background-image:url(terra.PNG); border-radius:50%; } #orbitat{ width:500px; height:300px; position:absolute; margin-left:100px; margin-top:150px; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear; -webkit-animation-name:tgira; -webkit-animation-duration:15s; }

La parte che ci interessa è quella relativa alle righe -webkit-

"-webkit-animation-iteration-count:infinite;" indica che l'animazione sarà ripetuta all'infinito
"-webkit-animation-timing-function:linear;" indica che l'animazione avrà la stessa velocità dall'inizio alla fine
"-webkit-animation-name:tgira;" indica il riferimento all'animazione "-webkit-animation-duration:15s;" indica la durata dell'animazione

Fino a qua tutto è molto semplice direi.
Adesso scriviamo la nostra animazione nel file CSS:

@-webkit-keyframes tgira { from { -webkit-transform:rotate(0deg) } to { -webkit-transform:rotate(360deg) } }

Questo indica che la trasformazione dell’oggetto parte da una rotazione di 0 gradi per finire ad una di 360.
Salviamo il nosto file CSS con il nome: cssmuove.css.

Adesso nel nostro file html inseriamo la terra come div:

Salviamo e lanciamo, vediamo che il pianeta terra si muove in un orbita circolare. Possiamo far, adesso, ruotare la terra intorno al suo asse mentre ruota intorno al sole, aggiungiamo nell'identificatore della terra, nel file css le seguenti righe

-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-webkit-animation-name:tgira;
-webkit-animation-duration:5s;

in modo che diventi:

Salviamo e lanciamo, vediamo che il pianeta terra ruota anche su se stesso.
Creiamo adesso il sole, gli altri pianeti e lo sfondo; Per ogni pianeta creiamo una diversa "orbita" ed una diversa velocità di rotazione.
Scriviamo il nostro file CSS:

@charset "utf-8";
/* CSS Document */
body {
	background-color:#000;
	background-image:url(sfondo.jpg);
	color:#FFF;
	font-family:Verdana, Geneva, sans-serif;
	font-size:10px;
	margin-top:30px;
}

#terra{
    position:absolute;
    top:0;
    left:0;
    width:40px;
    height:40px;
	background-image:url(terra.PNG);
    border-radius:50%;
	
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
	-webkit-animation-name:tgira;
	-webkit-animation-duration:5s;}

#orbitat{
	width:500px;
	height:300px;
	position:absolute;
	margin-left:100px;
	margin-top:150px;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
	-webkit-animation-name:tgira;
	-webkit-animation-duration:15s;
}

#orbitav{
	width:300px;
	height:200px;
	position:absolute;
	margin-left:150px;
	margin-top:201px;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
	-webkit-animation-name:tgira;
	-webkit-animation-duration:7s;
}

#venere {
   
	width:10px;
	height:10px;
	background-image:url(venere.png);
	background-repeat:no-repeat;
}

#orbitam{
	width:620px;
	height:320px;
	position:absolute;
	margin-left:20px;
	margin-top:150px;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
	-webkit-animation-name:tgira;
	-webkit-animation-duration:25s;
}

#marte {
   
	width:30px;
	height:29px;
	background-image:url(marte.png);
	background-repeat:no-repeat;
	
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
	-webkit-animation-name:tgira;
	-webkit-animation-duration:9s;
}

#sole {
	width:100px;
	height:100px;
	background-image:url(sole.png);
	background-repeat:no-repeat;
	position:absolute;
	margin-left:230px;
	margin-top:250px;
	
}

@-webkit-keyframes tgira { 
from { -webkit-transform:rotate(0deg) } 
to { -webkit-transform:rotate(360deg) }
}

Da notare che tutti i pianeti usano una sola animazione tgira che viene usato sia per l'orbita dei pianeti che per la rotazione dei pianeti. Ogni animazione ha un tempo diverso: -webkit-animation-duration:Xs; dove x indica i secondi della rotazione.

Il nostro file HTML avrà i tag dei pianeti come in esempio:

v.26	v.19	v12	v.5	v.9
100%	NO	NO	100%	NO