CODEWITHSUNDEEP
javascripthtmlcssreactjssass
Dylan Bozarth
Dylan Bozarth

Reputation: 1694

Orbit animation without element rotating

I am making a model of the solar system where all the planets are orbiting the sun. I am doing this with the following code:

.neptuneOrbit {
  --time: 19;
  --dist: 2.76;
  --size: .85;
  z-index: 2;
}
.orbitContainer {
width: 10rem;
  --timeunit: 10s;
  --offsetunit: 30vmin;
  --sizeunit: 5vmin;
  
  position: absolute;
  top: calc(50% - calc(var(--size) * var(--sizeunit)));
  --offset: calc(var(--dist) * var(--offsetunit));/* distance from the center */
  left: calc(50% - var(--offset)); 
  width: calc(2 * var(--offset));
  animation: circleRound calc(var(--time) * var(--timeunit)) linear   infinite;
}
.orbitContainer .inner {
  
  position: relative;
  width: calc(calc(2 * var(--size)) * var(--sizeunit));
  height: calc(calc(2 * var(--size)) * var(--sizeunit)); 
  border-radius: 50%;
  border-style: none;
 
}

@keyframes circleRound {
  100% {
    transform: rotate(360deg);
  }
}

And in app.js

<div className="orbitContainer neptuneOrbit"> <MiniPlanet className="neptuneMini inner" name="neptune" /></div>

The miniPlanet component only holds the textures.

The issue is that when the planets are orbiting, they are also rotating 360 degrees. So that the north or south pole eventually face the sun. I am trying to have the planets orbit in a "fixed" position to where they will face the same direction while going in a circle. I cannot accomplish this without breaking the orbit animation however.

Upvotes: 1

Views: 488

Answers (1)

Temani Afif
Temani Afif

Reputation: 272806

Based on my previous answer you can do like below. The text is only to illustrate that the circle remain in the same direction:

#container {
  width: 200px;
  height: 200px;
  margin: 40px auto;
  display:grid;
  place-content: center;
  background:radial-gradient(farthest-side,blue 90%,transparent) center/10px 10px no-repeat;
}

.item {
  grid-area:1/1;
  width:var(--s);
  height:var(--s);
  margin:auto;
  text-align: center;
  border-radius: 50%;
  background: #f00;
  color:#fff;
  font-weight:bold;
  animation: spin var(--d) linear infinite; 
  transform:rotate(0) translate(var(--o)) rotate(0);
}
@keyframes spin {
  100% {
    transform:rotate(1turn) translate(var(--o)) rotate(-1turn);
  }
}
<div id="container">
  <div class="item" style="--d:5s;--o:65px;--s:40px;">1</div>
  <div class="item" style="--d:6s;--o:150px;--s:20px;">2</div>
  <div class="item" style="--d:10s;--o:90px;--s:10px;">3</div>
  <div class="item" style="--d:2s;--o:30px;--s:30px;">4</div>
</div>

Upvotes: 2

Related Questions