I'm currently developing a solar system viewer app that features 8 objects orbiting a central point using a specific method.
.orbitContainer {
width:var(--s);
height:var(--s);
margin:auto;
text-align: center;
border-radius: 50%;
animation: spin var(--d) linear infinite, translateBackground 100s infinite linear;
transform:rotate(0) translate(var(--o)) rotate(0);
}
@keyframes spin {
100% {
transform:rotate(1turn) translate(var(--o)) rotate(-1turn);
}
}
.mercuryPath {
--d:20s;
--o:4.5rem;
--s: 12rem;
z-index: 9;
}
Everything is functioning well, except for the 6th object which happens to be Saturn with its distinct rings. I'm attempting to overlay an image of the rings onto the element representing Saturn.
Here's what I've tried so far:
<div className="orbitContainer saturnPath" >
<MiniPlanet name="saturn" className="orbitContainer saturnMini " />
<img src="./components/planetTextures/rongs.png" alt="rings"></img></div>
I initially thought that by placing the image within the same path container as the planet, it would rotate in a synchronized manner. However, it seems to move randomly around instead.
I'd appreciate suggestions on how to effectively overlay the rings on the planet, or any alternative methods to achieve this. Due to each planet having unique atmospheric effects, using a static image of Saturn with rings is not feasible.
Here is a codesandbox link showcasing my code.