Css 使用转换围绕父元素旋转子元素

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

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

。中心圆{
顶部：100px；
左：100px；
宽度：180px；
高度：180像素；
边框：1px纯黑；
边界半径：100%；
位置：相对位置；
}
.四分之一圆{
宽度：65px；
高度：65px；
位置：绝对位置；
最高：0%；
左：50%；
边框：1px实心#F28B46；
边界半径：100%；
动画：旋转2秒，轻松进出；
-webkit转换来源：0%50%；
}
@-webkit关键帧向后旋转{
0% {
变换：旋转（-120度）；
}
100% {
变换：旋转（0度）；
}
}

---

可以通过在开始时将父圆外的较小圆设置（使用

顶部

，

左侧

），然后将

变换原点

设置为父圆半径+较小圆半径来实现这种类似于轨道的动画。这是因为旋转中心应位于较大圆的中心，较小圆的左上角偏移半径的组合距离

当我们将

变换原点设置为
0%50%
时，50%是较小圆高度（32.5px）的一半，因此是旋转直径，因此旋转围绕较小的假想圆进行。然而，我们实际上需要的是它围绕着更大的圆进行动画，所以想象的圆的半径必须更大


。中心圆{
位置：相对位置；
顶部：100px；
左：100px；
宽度：180px；
高度：180像素；
边框：1px纯黑；
边界半径：100%；
}
.四分之一圆{
位置：绝对位置；
宽度：65px；
高度：65px；
顶部：-32.5px；
左：-32.5px；
边框：1px实心#F28B46；
边界半径：100%；
变换：旋转（-45度）；
动画：向后旋转2秒，向前轻松进出；
变换原点：122.5px122.5px；
}
@关键帧向后旋转{
0% {
变换：旋转（-45度）；
}
100% {
变换：旋转（135度）；
}
}

你想要这样吗？你的想法是对的，虽然我想要整个橙色圆圈在黑色圆圈之外，就像它绕着它转一样。像行星和月亮一样思考。有没有办法让它以给定的角度开始，以给定的角度结束？我的最终目标是让它旋转一定数量，但不是无限重复，所以它是一个一次性的动画，在一定范围内旋转。是的@Dave。我修改了旋转和迭代计数（到无穷大），只是为了让动画在更长的时间内可见。否则，它们可以与原始代码中的相同。只有定位和变换原点设置需要更改。因此，如果我想让它从9点钟的位置开始旋转到3点钟，也就是180度，那么我必须更改哪些值才能使它到达该起始位置？@Dave:较小的圆的原始位置形成45度角（大约10:30），因此你必须从（-45度）到（135度）。啊，谢谢：）有点让人困惑！所以（135度）不是“从起始位置旋转的总度数”，而是圆上的一个固定位置。