¿Te imaginas poder hacer un globo que gire, únicamente con 2 imágenes y código CSS3? Pues es posible, gracias a la propiedad keyframe y a animations. Uniéndolo todo podemos hacer un efecto bastante conseguido, de un globo que gira en la dirección y con el tiempo que deseemos. A continuación te muestro cómo se haría:
Código HTML
El código HTML es bastante simple, constaría de dos divs, uno llamando a la clase “globe-container” y otro a la clase “globe” en el que se muestra el mapa del mundo, que será lo que le dará la forma 3D al globo.
<div class="globe-container"> <div class="globe"></div> </div>
Código CSS
El código CSS te lo voy a ir mostrando a trozos, para que entiendas lo más importante, ya podrás ver el código completo en el ejemplo que pongo al final. Por lo que vemos, tenemos primero la clase “globe-container”:
.globe-container { margin:120px auto; width:92px; height:92px; border:1px solid transparent; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; overflow: hidden; background:url(https://fengel.com/testing/earthMap_92h.png) top left no-repeat; -webkit-animation: rotate 10s infinite linear; -moz-animation: rotate 10s infinite linear; -ms-animation: rotate 10s infinite linear; -moz-box-shadow: 0px 5px 15px #888; -webkit-box-shadow: 0px 5px 15px #888; box-shadow: 0px 5px 15px #888; }
Si nos damos cuenta, en background url indicamos la imagen del mapa, a tamaño rectangular:
Con border-radius pasará de ser una imagen rectangular a circular. Luego, mediante la propiedad animation, la rotaremos de forma infinita (que nunca pare de dar vueltas), y le daremos un tiempo para que de una vuelta completa, que será en este caso de 10 segundos. Posteriormente le daremos una sombra con box-shadow para darle mayor efecto tridimensional.
Ahora, pasaremos a analizar la clase “globe”.
.globe { position:absolute; width:92px; height:92px; background:url(https://fengel.com/testing/shadow_highlight.png) top left no-repeat; }
Con globe lo que haremos será superponer con position absolute la imagen que da forma tridimensional al globo:
Al estar en png se transparentará con la anterior clase. Es decir, si no tuvieramos dicha imagen de fondo, el globo se mostraría así:
Con la imagen de fondo que le da el efecto tridimensional se mostraría así:
Finalmente, con la propiedad keyframe y el valor variaremos la imagen de fondo para que pase de tener una posición inicial de 0px (al principio de la imagen del mapa) a tener una posición de fondo de-160px (casi al final de la imagen del mapa, cuando se han visto todos los continentes y más allá ya se repiten), gracias a esto se crearán distintos “keyframes” desde el inicio hasta el final de la imagen:
@-webkit-keyframes rotate{ 0% { background-position:0px 0px; } 100% { background-position:-160px 0px; } } @-ms-keyframes rotate{ 0% { background-position:0px 0px; } 100% { background-position:-160px 0px; } } @-moz-keyframes rotate{ 0% { background-position:0px 0px; } 100% { background-position:-160px 0px; } }
¿Por qué se le ponen prefijos antes de la propiedad? Para que sea compatible con los distintos navegadores: -moz- para el motor de Firefox, -ms- para Internet Explorer y -webkit- para navegadores basados en webkit como Chrome y Safari.
Ejemplo de su funcionamiento
Podemos ver un ejemplo de su funcionamiento, incluso modificar el código en tiempo real, en este enlace que te muestro a continuación: