Globo terraqueo girando con CSS3

En otro articulo ya os comente como crear el planeta tierra con rotacion dia-noche utilizando CSS3 (podeis verlo haciendo click aqui). En aquella ocasion use una imagen para el fondo, pero en este caso utilizare cuatro en formato PNG con fondo transparente, dos para la estructura y otras dos para los mapas.

Estas son las 4 imagenes que componen el fondo de este planeta tierra animado.

Para la animacion he utilizado estilos CSS3, tirando mano de keyframes. Se crea una regla con un nombre que es utilizada por la propiedad animation-name para que coincida con una animacion de keyframe a su lista. Cada regla contiene una lista de estilo de selectores, cada una de los cuales esta compuesto de un porcentaje a lo largo de la animacion en la que se produce el keyframe asi como un bloque que contiene la informacion de estilo para ese keyframe.

Y el resultado tan maravilloso es el que veis a continuacion:

ver el codigo completo

<div class="globo"><div class="frontal"></div><div class="mapfront"></div><div class="mapback"></div><div class="back"></div></div>

<style>
@keyframes mapfront_spin {
  0% {
    background-position: 1400px 0%;
  }
 
  100% {
    background-position: 0 0%;
  }
}

@keyframes mapback_spin {
  0% {
    background-position: 0 0%;
  }
 
  100% {
    background-position: 1400px 0%;
  }
}

@-webkit-keyframes mapfront_spin {
  0% {
    background-position: 1400px 0%;
  }
 
  100% {
    background-position: 0 0%;
  }
}

@-webkit-keyframes mapback_spin {
  0% {
    background-position: 0 0%;
  }
 
  100% {
    background-position: 1400px 0%;
  }
}
.globo {
  width: 400px;
  height: 400px;
  position: relative;
}
.frontal {
  width: 400px;
  height: 400px;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqtnsHWPc3LYyPTbKYbSipXhrYtp2LJDO_gQv3cUaqC2N5ybP4RYUenJEd_-mHE1eOCzIYTdWOgAT8vIPZ9SdzSpBFdZd0mTkSP30163g39ecoEuhWTxFCp42sO3ta9H69M_IFVpc_9qg/s1600/1.png);
  z-index: 5;
  position: absolute;
  top: 0;
  left: 0;
}
.back {
  width: 400px;
  height: 400px;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlyWrrLBfE3OuKbt5odu22tDu21DtE8pyHrdsH7NxGavsAnLBHwTmQrA0matAujhq9MZ_8QDxthVUKEQVkoAWNDG4xOb_eIi-GYvKCAH0lHHWtvw7aH-snFOGzRL_6D6LMQHi65D5y75E/s1600/2.png);
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
}
.mapfront, .mapback {
  border-radius: 300px;
  width: 340px;
  height: 340px;
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 4;
}
.mapfront {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpeZi1RMjb9CA1f8TgZePdwlk3A4pzq6CF60znAXGiYrRsD8kqHDjVQuSGEnYZlnvb-u3BrsMF9rQw6L_X0cDYOdB7u9ts46CH0GNVyvpU8sgcmfMMH7XwuKCQ2Rx-YR6OECYaM-a5Wx4/s1600/3.png) repeat-x;
  -webkit-animation: mapfront_spin 15s linear infinite;
  animation: mapfront_spin 15s linear infinite;
}
.mapback {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4xvEOjEnHHU66i8NeIsFbbJRZjrrf3PkjqvhcA-xFwCazwvMuULKIDn-gCBXgCMSi70ICwhWK89DMKG_D-KcP9nNhFNuO9tpkN4pFAJQPtJ8JFoo1cT8JzI05CuEpAfHdAZHDoyzkQPs/s1600/4.png) repeat-x;
  position: absolute;
  -webkit-animation: mapback_spin 15s linear infinite;
  animation: mapback_spin 15s linear infinite;
}
</style>