Earth Rotation Using Css

.earth_area { margin:0; width:500px; height:500px; border:1px solid transparent;
-webkit-border-radius:500px; -moz-border-radius:500px; border-radius:500px; overflow:hidden;
background:url(map1.jpg) 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; }
.earth { position:absolute; width:500px; height:500px;
background:url(globe.png) top left no-repeat }
@-webkit-keyframes rotate{ 0% { background-position:0px 0px; }
100% { background-position:-1150px 0px; } }
@-ms-keyframes rotate{ 0% { background-position:0px 0px; }
100% { background-position:-1150px 0px; } }
@-moz-keyframes rotate{ 0% { background-position:0px 0px; }
100% { background-position:-1150px 0px; } }

<div class="earth_area"><div class="earth"></div></div>

Tagged in:

• css animation
• CSS3
• Eart Rotation css
• Globe css