How can I rotate an object(div) around a circle margin? Css only

Question

I want to move the blue container around the circle (with it's bottom margin if possible). What I succeded until now is to move it by it's center(still not so smooth). Does css has any option to translate & rotate in a circle direction? What I tried was to translate and rotate at the same time by using this three points (top, right, and top-right) of the circle, because I only need it to rotate 90 deg.

#mainContent{ position: relative;
    display: block;
    width: 100vw;
    border: none;
    margin: 0 auto;
    height: 100vh;
    overflow: visible;
    background: black;
}

#circle{
  position: absolute;
  left: 50%;
  top: 50%;
  background: red;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
}

.container{
   position: absolute;
  left: 50%;
  top: 50%;
  background: pink;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
}

#element{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 60px;
  background: blue;
  transform-origin: center;
  transform: translate(-50%, -50%);
    animation: orbit 3s linear infinite;
}

@keyframes orbit{
  0% {
    transform-origin: center;
    transform: translate(-50%, calc(-50% - 50px)) rotate(0deg);
}
  50%{
    transform-origin: center;
    transform: translate(calc(-50% + 35.35px), calc(-50% - 35.35px)) rotate(45deg);
  }
100% {
    transform-origin: center;
    transform: translate(calc(-50% + 50px), -50%) rotate(90deg);
}
}

*{
  margin: 0;
}

<div id="mainContent">
  <div class="container"></div>
  <div id="circle"></div>
  <div id="element"></div>
</div>

https://stackoverflow.com/questions/39020670/rotate-objects-around-circle-using-css — Paulie_D, Jun 11 '21 at 15:23

score 4 · Accepted Answer · answered Jun 11 '21 at 12:58

You have to play with the transform-origin

#mainContent {
  position: relative;
  display: block;
  width: 100vw;
  border: none;
  margin: 0 auto;
  height: 100vh;
  overflow: visible;
  background: black;
}

#circle {
  position: absolute;
  left: 50%;
  top: 50%;
  background: red;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
}

.container {
  position: absolute;
  left: 50%;
  top: 50%;
  background: pink;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
}

#element {
  position: absolute;
  top: 50%;
  left: calc(50% - 10px);
  width: 20px;
  height: 60px;
  background: blue;
  transform-origin: top center;
  animation: orbit 3s linear infinite;
}

@keyframes orbit {
  to {
    transform: rotate(360deg);
  }
}

* {
  margin: 0;
}

<div id="mainContent">
  <div class="container"></div>
  <div id="circle"></div>
  <div id="element"></div>
</div>

Thanks a lot! Your idea combined with @Hoch answear is exactly what I need. — Mareș Ștefan, Jun 12 '21 at 14:37

score 2 · Answer 2 · answered Jun 11 '21 at 13:07

If i understand right, you need to set the translate-origin to the side which the blue rectangle reach the center of the red circle, check the snipet: (hover the red circle to hide the blue rectangle)

div {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 10em auto;
}

.round {
  border-radius: 100%;
  background: red;
}
.round:hover + .rectangle{background:transparent;}
.rectangle {
  width: 100%;
  height: 20px;
  background: blue;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 50%;
  margin: auto;
  transform-origin: right;
  transform: rotate(0deg);
  animation: orbit 3s linear infinite;
}
.moon{
  width:50px;height:50px;
  background:white;
  border:1px solid gray;
  border-radius:100%;
  position:absolute;
  top:0;
  bottom:0;
  margin:auto;
}

@keyframes orbit {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

<div>
  <div class="round"></div>
  <div class="rectangle">
    <div class="moon"></div>
  </div>
</div>

The idea whit the moon div helps me a lot, thanks! – Mareș Ștefan Jun 12 '21 at 14:34 — Mareș Ștefan, Jun 12 '21 at 14:34

score 1 · Answer 3 · answered Jun 11 '21 at 12:56

Don't center the element but put it on the top side and then adjust the transform-origin to make it at the center of the circle:

#mainContent {
  position: relative;
  margin: 0 auto;
  height: 100vh;
  overflow: visible;
  background: black;
}

#circle {
  position: absolute;
  left: 50%;
  top: 50%;
  background: red;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
}

.container {
  position: absolute;
  left: 50%;
  top: 50%;
  background: pink;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
}

#element {
  position: absolute;
  top: calc(50% - 80px); /* 80 = (60 + 100)/2*/
  left: calc(50% - 10px);
  width: 20px;
  height: 60px;
  background: blue;
  transform-origin: 50% calc(100% + 20px); /* 20 = (100 - 60)/2 */
  animation: orbit 3s linear infinite;
}

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

* {
  margin: 0;
}

<div id="mainContent">
  <div class="container"></div>
  <div id="circle"></div>
  <div id="element"></div>
</div>

How can I rotate an object(div) around a circle margin? Css only

3 Answers3