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.


If you want to get extreme…

Makes me think if you knew trig (I sure dont) couldnt you make an svg displacement map to do the same sorta thing?

Ana Tudor is an absolute genius.
I think she might even be on the SVG working group…

1 Like

She sure is, she also a really nice person. She and a bit from Sara Soueidan helped me get my head around the 3d css stuff. Got to love those smart people that get hyper focused on one thing and share all they know with others, giving their time for personal help, and reporting ever error they encounter…absolute gems.

1 Like