Javascript 在特定轴上旋转对象并停止

我不是这个问题的作者，但它只是由Eryc Masselli在葡萄牙语Stackoverflow中提出的，我对这个问题的答案非常感兴趣，因为我发现它非常有趣。我将把它翻译如下：

我想知道如何旋转和对象（div）周围的轴 另一个对象（另一个div）。我的问题是：我有一个 大圆圈和大圆圈下面的5个小圆圈。每个圆圈都是 一个单独的分区

我需要的是，当5个小圆圈中的一个被点击时 以顺时针方向绕大圆旋转，直到 第三个圆圈的位置。下面是一个示例 单击数字4的圆后的旋转：

副标题：圆圈将移动，直到单击的圆圈占据位置3

我只需要用CSS来做，但万一是这样的话 不可能，如果不太多，解决方案可能使用j。谢谢大家!

---

嗯。我相信这不是一个简单的任务，只有CSS，所以我愿意接受任何答案，只要它是可行的。谢谢你的帮助

正如我所说，这是一个javascript工作；）

CSS将需要大量额外的HTML标记和冗余的CSS规则（SASS或类似的规则会有所帮助，但为什么不使用纯js？）

下面是一个平均示例，使用了多次复制/粘贴的两条规则

.circle{
高度：50vh；
宽度：50vh；
边界半径：100%；
边框：实心1px；
保证金：25vh自动；
位置：相对位置；
}
.轮换{
身高：60%；
位置：绝对位置；
最高：50%；
左：50%；
宽度：10vh；
左边距：-5vh；
显示器：flex；
对齐项目：柔性端；
}
.旋转div{
边界半径：100%；
边框：实心1px；
高度：10vh；
宽度：10vh；
显示器：flex；
对齐项目：居中；
证明内容：中心；
背景：#0095FF；
}
#a、 #a div，#b，#b div，#c div，#d，#d div，#e，#e div{过渡：1s；}
#a、 #b、#c、#d、#e{变换原点：5vh 0；}
#a{z-索引：1；}
标签{光标：指针}
/*一个*/
#一：选中~.圆#a{变换：旋转（120度）}
#一：选中~.circle#a div{变换：旋转（-120度）}
#一：选中~.圆#b{变换：旋转（90度）}
#一：选中~.圆#b div{变换：旋转（-90度）}
#一：选中~.圆#c{变换：旋转（60度）}
#一：选中~.圆#c div{变换：旋转（-60度）}
#一：选中~.圆#d{变换：旋转（30度）}
#一：选中~.圆#d div{变换：旋转（-30度）；}
#一：选中~.圆#e{变换：旋转（0度）}
#一：选中~。圆#e div{变换：旋转（-0度）；}
/*两个*/
#二：选中~.圆#b{变换：旋转（120度）}
#二：选中~.圆#b div{变换：旋转（-120度）；}
#二：选中~.圆#c{变换：旋转（90度）}
#二：选中~。圆#c div{变换：旋转（-90度）；}
#二：选中~.圆#d{变换：旋转（60度）}
#二：选中~.圆#d div{变换：旋转（-60度）}
#二：选中~.圆#e{变换：旋转（30度）}
#二：选中~。圆#e div{变换：旋转（-30度）；}
#二：选中~.圆#a{变换：旋转（360度）}
#二：选中~.圆#a div{变换：旋转（-0度）；}
/*三*/
#三：选中~.圆#c{变换：旋转（120度）}
#三：选中~。圆#c div{变换：旋转（-120度）；}
#三：选中~.圆#d{变换：旋转（90度）}
#三：选中~.圆#d div{变换：旋转（-90度）}
#三：选中~.圆#e{变换：旋转（60度）}
#三：选中~。圆#e div{变换：旋转（-60度）；}
#三：选中~.圆#a{变换：旋转（390deg）}
#三：选中~.圆#a div{变换：旋转（-30度）；}
#三：选中~.圆#b{变换：旋转（360度）}
#三：选中~。圆#b div{变换：旋转（-0度）；}
/*四*/
#四：选中~.圆#d{变换：旋转（120度）}
#四：选中~.圆#d div{变换：旋转（-120度）；}
#四：选中~.圆#e{变换：旋转（90度）}
#四：选中~。圆#e div{变换：旋转（-90度）；}
#四：选中~.圆#a{变换：旋转（420度）}
#四：选中~。圆#a div{变换：旋转（-60度）；}
#四：选中~.圆#b{变换：旋转（390deg）}
#四：选中~。圆#b div{变换：旋转（-30度）；}
#四：选中~.圆#c{变换：旋转（360度）}
#四：选中~。圆#c div{变换：旋转（-0度）；}
/*五*/
#五：选中~.圆#e{变换：旋转（120度）}
#五：选中~。圆#e div{变换：旋转（-120度）；}
#五：选中~.圆#a{变换：旋转（450度）}
#五：选中~.圆#a div{变换：旋转（-90度）}
#五：选中~.圆#b{变换：旋转（420度）}
#五：选中~。圆#b div{变换：旋转（-60度）；}
#五：选中~.圆#c{变换：旋转（390deg）}
#五：选中~。圆#c div{变换：旋转（-30度）；}
#五：选中~.圆#d{变换：旋转（360度）}
#五：选中~。圆#d div{变换：旋转（-0度）；}
输入[name=“group”]{位置：绝对；右侧：100vw}

1.
2.
3.
4.
5.

正如我所说，这是一项javascript工作；）

CSS将需要大量额外的HTML标记和冗余的CSS规则（SASS或类似的规则会有所帮助，但为什么不使用纯js？）

下面是一个平均示例，使用了多次复制/粘贴的两条规则

.circle{
高度：50vh；
宽度：50vh；
边界半径：100%；
边框：实心1px；
保证金：25vh自动；
位置：相对位置；
}
.轮换{
身高：60%；
位置：绝对位置；
最高：50%；
左：50%；
宽度：10vh；
左边距：-5vh；
显示器：flex；
对齐项目：柔性端；
}
.旋转div{
边界半径：100%；
边框：实心1px；
高度：10vh；
宽度：10vh；
显示器：flex；
对齐项目：居中；
证明内容：中心；
背景：#0095FF；
}
#a、 #a div，#b，#b div，#c div，#d，#d div，#e，#e div{过渡：1s；}
#a、 #b，#c，#d