Rotating Earth Animation using CSS

Earth rotation refers to the spinning of the Earth around its axis, an imaginary line that runs from the North Pole to the South Pole. This rotation is what causes day and night on Earth. The Earth rotates counterclockwise when viewed from above the North Pole, and it completes one full rotation approximately every 24 hours.

The following images can be used to achieve earth rotation animation using CSS :

sky.jpeg

world.jpeg

Follow this video for complete guidance :

Earth Rotation Animation using CSS Source Code

<style>
    body {
      background:black url(sky.jpeg);
      animation: sky 205s linear alternate;
    }
    #box {
      background:url(world.jpeg);
      background-size:cover;
      border-radius:50%;
      width:300px;
      height:300px;
      animation: earth 5s linear 0s infinite;
      margin:16% 0% 0% 40%;
      transform:rotateX(6deg) rotateY(6deg) rotateZ(6deg);
    }

    @keyframes earth {
      0% { background-position:0 0 }
      100% { background-position:355px 0 }
    }

    @keyframes sky {
      0% { background-position:0 0 }
      100% { background-position:0 100% }
    }
</style>

<div id="box"></div>