3d Earth with rotating animation built with pure CSS – covered tutorial, demonstration, and code.

A friend of mine suggested me to do some animated planet stuff with CSS. I gave it a go and ended up with a kinda-cool animated planet Earth. I had this one in my local playground as yet, but today I’m going to share it online right here.

Before going any further, I want to tell you that I have made it look like 3d-earth and used CSS3 keyframes for the rotating animation. You must see the demo before we jump into the code mess

CSS Earth: The Concept

This idea demands a realtime rotating sphere, which is not possible in CSS. But a lookalike is doable, all you need is to throw some CSS ingredients into a div and there you go.

For animation, I’ve used a small CSS keyframes trick that makes it appear lively and rotating.

Lets start coding.


It’s just a single div, trust me.

<div id="earth"></div>

Will play with :before and :after of #earth in the next section to add some detailing.


Now comes the important part, the styling.

I added some width and height to #earth, and then gave it a background-image similar to flat earth map. Here’s the small preview of our flat earth map I found on the internet.

Our #earth is relatively positioned. To make it appear spherical, I added a 50% of border-radius.

Detailing of our earth as a 3d object has been done in 3 layers:

  1. box-shadow play with the #earth itself (mainly for the shadow on the right)
  2. Again applying box-shadow in #earth:before for the shadow on left
  3. Finally applying some CSS3 radial-gradient to the background of #earth:after to give our earth a spherical finish

The :before and :after of #earth are absolute positioned, and carry same height, width and border-radius as the main element.

I’ve fixed the background-size of our earth to 630 pixels to fit the image perfectly inside our #earth. I come up with this number after a number of adjustments.

The Animation

Now comes the animation part. Our earth map image is very wide. Our #earth element is of 300x300px, hence it shows earth map under 300x300px only.

Now if we linearly move our background from 0 to 630px of horizontal position, we can give #earth a rotating animation effect. I’ve implemented this with the help of CSS keyframes.

See the final code for #earth below:

#earth {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 3em auto;
  background: url(earthmap.jpg) 0 0 repeat;
  border-radius: 50%;
  background-size: 630px;
  animation: rotate 4s linear infinite;
  transition: transform 200ms linear;
  transform-style: preserve-3d;
  box-shadow: inset 20px 0 80px 6px rgba(0, 0, 0, 1);
  color: #000;

#earth:after {
  content: "";
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: -80px 15px 80px 10px rgba(0,0,0,.9) inset;

#earth:before {
  content: "";
  position: absolute;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.2;
  background: radial-gradient(circle at 100px 100px, #fff, #000);

@keyframes rotate {
  0% {background-position: 0 0;}
  100% {background-position: 630px 0;}

On the demo page, I’m using a background image for body to make the environment look like space, just a few stars you see in the background.

I wanted to add curved and blurred edges to our earth but that’s not doable with the technique I followed – as far as I know.

Hope you enjoyed this article. Let me know your thoughts on this. Thanks :)