Filoweb.it

Note: Questo toutorials funziona solo con i browsers che supportano il "web kit"
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.

La parte che ci interessa nello script è 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 o nello stile della pagina:

@-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 oppure mettiamolo nella pagina stessa.

Adesso nel nostro file html inseriamo la terra come div:

<div id="orbitat"><div id="terra">Terra </div></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;

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 (di seguito solo per il pianeta terra).

e per finire nel nostro codice CSS scriviamo la rotazione:

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:

<div id="orbitav"><div id="venere">Venere</div></div>
<div id="orbitat"><div id="terra">Terra </div></div>
<div id="orbitam">
<div id="marte">Marte</div></div>
<div id="sole">SOLE</div>

-------
script completo
-------

</body>

</html>