使用转换

Question

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

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

＆＃13;

＆＃13;

.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);
    }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

JSFiddle

Answer 1

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

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

＆＃13;

＆＃13;

.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);
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

.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);
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;