¿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:
