Network Bar

venerdì 10 giugno 2016

In orbita con il css

Mentre stavo sistemando il post sul problema dei 3 corpi e su come la sua soluzione sia legata alla teoria del caos, mi sono imbattuto in un interessante codice css scritto da Mark Howard grazie al quale è possibile inserire un pianeta con due lune che gli orbitano intorno senza alcuna necessità di incorporare animazioni flash o gif.
In particolare sono presenti due serie di comandi per indurre la rotazione della prima
@keyframes rotate {
to {
transform: rotate(360deg);
}
}
e della seconda luna
@keyframes rotate2 {
to {
transform: rotate(360deg);
}
}
Per implementare tutto sul blog, ho scritto un foglio di stile apposito, a disposizione per l'utilizzo di chiunque usando il seguente link https://cdn.jsdelivr.net/gh/ulaulaman/dropsea/css/planet.css (Aggiornamento del 29 dicembre 2020: il link precedente, su gdrive, non funziona più è l'ho sostituito usando un repository su github che ho creato ad hoc e che sto iniziando a utilizzare). Lo sfondo celeste, invece, è tratto da PSDGraphics e l'ho caricato sul mio picasa.
L'interesse per il codice, infine, è dovuto essenzialmente al recupero dell'animazione in flash che apre il post sui 3 corpi, che ho provveduto a scaricare grazie ad archive.org e caricare sul mio google drive, visto che quelli di Dynamic Diagrams, che avevano per primi realizzato il planetario digitale, l'hanno cancellato.