CODEWITHSUNDEEP
cssreactjssass
Dylan Bozarth
Dylan Bozarth

Reputation: 1704

Overlaying an image on to an element that is moving

I am building a solar system viewer app. at the moment I have 8 objects that are orbiting a central point using the following 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;
}

This is working fine, but the 6th object is saturn, which has rings. I am trying to overlay the rings image I have on to the element which represents saturn
This is my attempt so far

<div className="orbitContainer saturnPath" >
<MiniPlanet name="saturn" className="orbitContainer saturnMini " />
<img src="./components/planetTextures/rongs.png" alt="rings"></img></div>

I thought my putting the image in the same path container as the planet, that it would at least rotate in a similar position. However it seems to be moving around randomly.

I would like to know how to overlay the rings on the planet, or another method of accomplishing this. The planets each have atmospheric effects so I cannot just use a static image of saturn with rings unfortunately.

Here is a codesandbox with my code.

Upvotes: 1

Views: 44

Answers (1)

A Haworth
A Haworth

Reputation: 36590

The main problem is that the rings are not in the same path as the planet, they are within the same outer div. In addition, it appears that the rings img has not been given the class 'rings'.

I do not have access to the rings image so cannot try out getting it positioned exactly on Saturn, but moving the img up into the orbiting element and adding the class meant I could see the word 'rings' going round on top of Saturn OK.

Try this:

<div class="orbitContainer saturnPath">
  <div class="miniPlanet">
    <a href="/saturn">
      <div class="orbitContainer saturnMini ">
        <img src="./components/planetTextures/rongs.png" alt="rings" class="rings">
      </div>
    </a>
  </div>
</div>

Side note: it is a little confusing having both the outer div 'saturnPath' and an inner div 'saturnMini' both with the class orbitContainer. Is this giving the orbits required?

Upvotes: 1

Related Questions