html - 如何围绕圆边旋转对象(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>