CODEWITHSUNDEEP
javascriptcssreactjssass
Dylan Bozarth
Dylan Bozarth

Reputation: 1694

Moving an element in a circular path around a central point

I am trying to have several objects on my page move around the center like a circle. I have found a codepen very similar to what I want, however I cannot replicate the method the author used. The method was:

  @return $pl-year-in-days * $year-in-second / 365.2563 + s  //Earth reference
}

What would be the best way of acomplishing this? I have made a codesandbox for clarification on what I mean. (things should orbit around the center ring)

Thank you in advance for your help

Upvotes: 0

Views: 1310

Answers (1)

A Haworth
A Haworth

Reputation: 36457

The question asks how best to move objects in a circle. I cannot of course say whether this is best, but a simple method, requiring only CSS/HTML is to have a div which is centered on the required center, have the object in it at the left and rotate the whole element.

Here's an example, of course the border would be removed in the real thing.

enter image description here

Here's a snippet with two objects rotating - using CSS variables so they can be sized relative to each other (like you might do with planets, with Earth having the unit dimensions normally).

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
}

.middle {
  position: absolute;
  --radius: 10vmin;
  top: calc(50% - var(--radius));
  left: calc(50% - var(--radius));
  width: calc(2 * var(--radius));
  height: calc(2 * var(--radius));
  background-color: gold;
  border-radius: 50%;
  border-style: none;
}

.obj1 {
  --time: 0.5;
  --dist: 0.6;
  --size: 0.4;
}

.obj2 {
  --time: 1;
  --dist: 1;
  --size: 1;
}

.obj {

  --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;
}

.obj .inner {
  position: absolute;
  position: relative;
  width: calc(calc(2 * var(--size)) * var(--sizeunit));
  height: calc(calc(2 * var(--size)) * var(--sizeunit)); 
  border-radius: 50%;
  border-style: none;
  background-color: blue;
}

@keyframes circleRound {
  100% {
    transform: rotate(360deg);
  }
}
<div class="middle"></div>
<div class="obj obj1"><a href="#"><div class="inner"></div></a></div>
<div class="obj obj2"><a href="#"><div class="inner"></div></a></div>

The question also asks about this

  @return $pl-year-in-days * $year-in-second / 365.2563 + s  //Earth reference

This is just a calculation sending back the number of seconds in the 'year' of a planet. (the rotation ie animation duration would be proportional to this). For Earth the year-in-days is 365.2563 so you get back a (earth) year in seconds. Wikipedia has good information on the relative times of each planets rotation around the sun.

Upvotes: 2

Related Questions