如何在旋转内圈的同时以圆周运动旋转div？

Question

这张图片是我想要实现的。边缘上的圆圈是可点击的。其结构使得每次旋转将是45度的倍数。 我正在使用css transform rotate属性进行旋转。

它应该如何运作？

• 当我们点击边缘上的任何圆圈时，它应该到达其活动位置，它应该始终以顺时针方向旋转。

这就是我做的

我通过为圈子分配数字来实现轮换。

即，如果点击7号，则它将按角度(9-7)*45=90度旋转。 （这次我没有动态改变数字。也就是说，当圆圈旋转时，给圆圈的数字是相同的。）

这在这里工作正常。但是，让我们看看这种情况：当我们点击第二个位置圆圈时它将旋转315度然后如果你再次点击相同（第二个）位置，那么它将使角度为270并且它以逆时针方向旋转div方向。我认为这是它的行为。但是，我不希望这种情况发生。它应该以顺时针方向再次旋转，并且应该处于活动位置。

现在我要做到这一点：

使用prev角度添加角度。

var prev_degree = prev_degree + current_degree;

（使用与上面相同的公式计算当前程度。）

这次我动态地改变数字，即，在每次点击时，数字被赋予期望的位置。从活动位置到8开始1，如图像

所示

但是这一次，当我旋转圆圈1,2次旋转完美时，它开始变得奇怪。如果你经常点击相同的数字，它将添加相同的角度，无论你的角度是多少，都会保持旋转完美。如果你点击随机圈子那么它就不会工作，这是完全错误的。

为什么顺时针？

因为边缘上的圆圈，它们包含我必须在整个圆圈旋转时保持位置的图标。（我可以通过指定负角来实现边缘上的旋转圆圈。但是，现在这不是问题。）< / p>

我没有得到负角度的情况。

如果你不清楚我的问题，请告诉我。

请让我知道你的建议:-)