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

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.5px）的一半，因此旋转直径会围绕较小的圆进行假想的圈子。而我们实际需要的是让它围绕较大的圆圈进行动画处理，因此虚构的圆圈半径必须更高。

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

下面的代码片段响应更快（在我看来更好），但它仍然需要将父级的半径硬编码到 transform-origin 中。在此片段中，较小圆圈的左上角与父级中心圆的偏移量略有不同（与上一个片段相比），因此 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>

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

Rotate child element around the parent element with transition

css

css-transitions

css-animations