如何围绕圆形边距旋转对象（div）？仅 CSS

Question

我想围绕圆圈移动蓝色容器（如果可能，它的底部边距）。到目前为止，我成功的是将它移动到它的中心（仍然不是那么顺利）。 css 是否有任何选项可以沿圆周方向平移和旋转？我尝试的是使用圆的这三个点（顶部、右侧和右上角）同时平移和旋转，因为我只需要它旋转 90 度。

#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>

Answer 1

你必须玩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>

Answer 2

如果我理解正确，您需要将翻译原点设置为蓝色矩形到达红色圆圈中心的一侧，检查片段： （悬停红色圆圈隐藏蓝色矩形）

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>

Answer 3

不要将元素居中，而是将其放在顶部，然后调整 transform-origin 使其位于圆的中心：

#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>