Overlapping Elements on Top of Each Other!

My latest article is up! It’s a CSS one this time :slight_smile:

Hi Kirupa -
Can you please make the planet rotating as well or advice on that?

1 Like

Hi @Gary_D_souza - it depends! How do you want the planet to rotate? If you want it to rotate horizontally or vertically, that can be done with little effort.

If you want the rotation to look more realistic where the internal design of the planet is rotating similar to how you see videos of earth from outer space, that becomes a bit trickier :grinning:


Thanks for your response @kirupa . I would say rotating at a tilted angle? :slight_smile:

1 Like

Can you give me an example (like a YouTube video) of what a planet rotating on a tilted angle should look like? That will give me a better idea of how to apply it to what you are trying to do :slight_smile:

1 Like

Here’s an example of the realistic version, first one only works in chrome, second both…
…the basic idea is create a mask of a circle and then animate its background scrolling to the right. To get the angled look to match the example here couldn’t you transform rotate the background 45 deg after the scroll (might need another div)? I couldn’t get it to work in 2 minutes so gave up. I cant think at the moment as I’m giving up smoking and going through hell with my neighbors and landlord, sorry.