![after earth 3d after earth 3d](https://i.ytimg.com/vi/6FK8e6ei1ZA/maxresdefault.jpg)
To the northeast, on the ridge of the Pyrenees mountains, is the border with France and the small principality of Andorra. It is located on the Iberian Peninsula, where Portugal, Gibraltar and Andorra are. I’ve implemented this with the help of CSS keyframes.The Kingdom of Spain is a country located in southwest Europe. Now if we linearly move our background from 0 to 630px of horizontal position, we can give #earth a rotating animation effect. Our #earth element is of 300x300px, hence it shows earth map under 300x300px only. I come up with this number after a number of adjustments. I’ve fixed the background-size of our earth to 630 pixels to fit the image perfectly inside our #earth. The :before and :after of #earth are absolute positioned, and carry same height, width and border-radius as the main element. * Add some shape and overlay effect to it */īackground: radial-gradient(circle at 100px 100px, #fff, #000) * Again, give it all the available space */ * Again, break the flow to show this as an overlay */ Finally applying some CSS3 radial-gradient to the background of #earth:after to give our earth a spherical finish.* Make sure this has no generated content, as we want this just for fancy purposes */īox-shadow: -80px 15px 80px 10px rgba(0,0,0.9) inset * Make it take all the space available in the box (ahem. * Break the flow to show this as an overlay */ Again applying box-shadow in #earth:before for the shadow on left.the world map */īackground: url(path/to/world-map-image) 0 0 repeat / 630px īox-shadow: inset 20px 0 80px 6px rgba(0, 0, 0, 1) * Tweak the appearance, and give it a nice background i.e. * Set-up the dimensions and spacing */Īnimation: rotate 4s linear infinite /* This is going to be defined in the next step */ * Allow it to contain the absolutely positions pseudo-elements (later-on) */ Setting up the baseline and some box-shadow play with the #earth itself (mainly for the shadow on the right).
AFTER EARTH 3D CODE
Explanationĭetailing 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. To make it appear spherical, I added a 50% of border-radius. Here’s the small preview of our flat earth map I found on the internet. I added some width and height to #earth, and then gave it a background-image similar to flat earth map. Now comes the important part, the styling. Will play with :before and :after of #earth in the next section to add some detailing. But a lookalike is doable, all you need is to throw some CSS ingredients into a div and there you go.įor animation, I’ve used a small CSS keyframes trick that makes it appear lively and rotating. This idea demands a realtime rotating sphere, which is not possible in CSS.
![after earth 3d after earth 3d](https://i.ytimg.com/vi/v7hw8mdo-Is/maxresdefault.jpg)
You must see the demo before we jump into the code mess. I had this one in my local playground as yet, but today I’m going to share it online right here.īefore 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.
![after earth 3d after earth 3d](https://s3.amazonaws.com/tolerated/wp-content/uploads/2017/02/14142834/3d-earth-model.jpg)
I gave it a go and ended up with a kinda-cool animated planet Earth. Published on Decemby Rahul 3d Earth with Rotating Animation with CSSĪ friend of mine suggested me to do some animated planet stuff with CSS.