El sol, la tierra la luna y animaciones con css3

Hace algún tiempo vi un ejemplo brutal de como usar únicamente html5 y css3 para hacer una «representación» del sistema solar.

Viendo que estaba como uno de los proyectos de codeacademy hice una pequeña prueba que comparto. La diferencia fundamental con el de code academy es que en lugar de usar imágenes para representar a los planetas uso div con background-color y que he añadido la luna para poder jugar un poco con las animaciones «anidadas». Que fundamentalmente es un problema de posicionamiento css.


Aquí el resultado.

Hay otros experimentos muy chulos en esta línea como este que trata de reproducir el primer experimento usando un html más semántico. O este otro clon del primero donde también modifica la estructura del html usando div todos al mismo nivel de anidamiento. Este otro también sigue la idea del primero pero añade cosas chulas como usar funciones css para posicionar las estrellas de fondo en localizaciones aleatorias.

Y por último, uno que a pesar de incluir algo de javascript (para los controles) es capaz de reproducir el sistema solar en 3D.

Deja una respuesta