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