3d Earth with Rotating Animation with CSS

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.

The Concept of CSS Earth

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.

HTML

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.

CSS

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.

Explanation

Detailing of our earth as a 3d object has been done in 3 layers which is covered below step-by-step with some CSS code snippets.

1. Setting up the baseline and some box-shadow play with the #earth itself (mainly for the shadow on the right)

   #earth {
     /* [1] Allow it to contain the absolutely positions pseudo-elements (later-on) */
     position: relative;
   
     /* [2] Set-up the dimensions and spacing */
     width: 300px;
     height: 300px;
     margin: 3em auto;
   
     /* [3] Prepare the animation effects */
     transition: transform 200ms linear;
     animation: rotate 4s linear infinite; /* This is going to be defined in the next step */
   
     /* [4] Tweak the appearance, and give it a nice background i.e. the world map */
     color: #000;
     border-radius: 50%;
     background: url(path/to/world-map-image) 0 0 repeat / 630px;
     box-shadow: inset 20px 0 80px 6px rgba(0, 0, 0, 1);
   
     /* [5] Position things in a 3d space */
     transform-style: preserve-3d;
   }

2. Again applying box-shadow in #earth:before for the shadow on left

   #earth:after {
     /* [1] Break the flow to show this as an overlay */
     position: absolute;
     top: 0;
     left: 0;
   
     /* [2] Make it take all the space available in the box (ahem... globe!) */
     width: 100%;
     height: 100%;
   
     /* [3] Make sure this has no generated content, as we want this just for fancy purposes */
     content: '';
   
     /* [4] Give it some shape and shadow */
     border-radius: 50%;
     box-shadow: -80px 15px 80px 10px rgba(0,0,0,.9) inset;
   }

3. Finally applying some CSS3 radial-gradient to the background of #earth:after to give our earth a spherical finish

   #earth:before {
     /* [1] Again, break the flow to show this as an overlay */
     position: absolute;
     top: 0;
     left: 0;
   
     /* [2] Again, give it all the available space */
     width: 100%;
     height: 100%;
   
     /* [3] Duh. */
     content: '';
   
     /* [4] Add some shape and overlay effect to it */
     opacity: .2;
     border-radius: 50%;
     background: radial-gradient(circle at 100px 100px, #fff, #000);
   }

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.

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

If you put everything together, preview below the results you’ll be getting.

Demo the CSS-only Earth

On the demo page, I’m using a background image for the body to make the environment look like space, just a few stars repeating over-and-over-again as you can 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. Cheers!