使用过渡围绕父元素旋转子元素

Question

我有一个 CSS 动画，我试图让子元素围绕父元素旋转一定的度数。但是我不能让它围绕父原点旋转，也不能让它从正确的半径旋转，它似乎围绕着一个看不见的小圆圈旋转。

下面是损坏的动画。我该如何解决这个问题？

.center-circle {
    top:100px;
    left:100px;
    width: 180px;
    height: 180px;
  
    border:1px solid black;
    border-radius: 100%;
    position: relative;    
}
.quarter-circle {
    width:65px;
    height:65px;
    position: absolute;
    top: 0%;
    left: 50%;
    border:1px solid #F28B46;
    border-radius: 100%;
    animation: spin-back 2s ease-in-out;
    -webkit-transform-origin: 0% 50%;
}
@-webkit-keyframes spin-back {
    0% {
        transform:rotate(-120deg);
    }
    100% {
        transform:rotate(0deg);
    }
}

<div class="center-circle">
    <div class="quarter-circle"></div>
</div>

JSFiddle

Answer 1

可以通过在开始时将较小的圆设置在父圆之外（使用top、left）然后将transform-origin 设置为父圆的半径+小圆的半径来实现这种类似轨道的动画。这是因为旋转中心应该在大圆的中心，小圆的左上角偏移它们的半径的组合距离。

当我们将transform-origin 设置为0% 50% 时，50% 是小圆圈高度的一半（即 32.5 像素），因此旋转直径和旋转发生在一个较小的假想圆圈周围。而我们实际需要的是让它围绕更大的圆进行动画处理，因此想象的圆半径必须更高。

.center-circle {
  position: relative;
  top: 100px;
  left: 100px;
  width: 180px;
  height: 180px;
  border: 1px solid black;
  border-radius: 100%;
}
.quarter-circle {
  position: absolute;
  width: 65px;
  height: 65px;
  top: -32.5px;
  left: -32.5px;
  border: 1px solid #F28B46;
  border-radius: 100%;
  transform: rotate(-45deg);
  animation: spin-back 2s ease-in-out forwards;
  transform-origin: 122.5px 122.5px;
}
@keyframes spin-back {
  0% {
    transform: rotate(-45deg);
  }
  100% {
    transform: rotate(135deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="center-circle">
  <div class="quarter-circle"></div>
</div>

---

下面的 sn-p 响应更快（在我看来更好一点），但它仍然需要将父级半径硬编码到 transform-origin 中。在这个 sn-p 中，小圆的左上角与父中心圆的偏移量略有不同（与之前的 sn-p 相比），因此transform-origin 的计算也不同。

.center-circle {
  position: relative;
  top: 100px;
  left: 100px;
  width: 180px;
  height: 180px;
  border: 1px solid black;
  border-radius: 100%;
}
.quarter-circle {
  position: absolute;
  width: 80px;
  height: 80px;
  top: 50%;
  left: 0%;
  border: 1px solid #F28B46;
  border-radius: 100%;
  transform: translateX(-100%) translateY(-50%) rotate(0deg);
  animation: spin-back 2s ease-in-out forwards;
  transform-origin: calc(100% + 90px) 40px; /* 90px is radius of the parent */
}
@keyframes spin-back {
  0% {
    transform: translateX(-100%) translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateX(-100%) translateY(-50%) rotate(180deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="center-circle">
  <div class="quarter-circle"></div>
</div>