Javascript 在类似甜甜圈的元素上用6个元素旋转一整圈

嘿，伙计们，我需要一些建议，因为我现在陷入困境 为了清晰起见，我制作了两张截图

基本上，我想要的是，如果我按下其中一个按钮（左/右），整个圆圈应该旋转-暗区激活状态应该淡入灰色，而激活的灰色区域应该淡入暗区 单词应该保持这个位置，直到倒转为止，然后再翻转

我有一些想法，但我不知道如何开始。 css3+旋转是否可能，我是否需要画布，或者是否有其他可能

你们怎么解决这个问题

---

Thx，请提前咨询您的建议。

复制placeImage功能，并使用它在画布上居中旋转图像。在进行旋转之前，请确保清除画布

功能位置图像（ctx、img、cx、cy、deg）{
var to_rad=Math.PI/180；
deg*=至_rad；
ctx.save（）；
//移到中间
翻译（cx，cy）；
//绕左上边缘旋转
ctx.旋转（度）；
//将图像居中放置在画布上。
ctx.平移（-img.宽度/2，-img.高度/2）；
ctx.drawImage（img，0,0）；
//清晰的旋转和平移
ctx.restore（）；
}
函数makeCirc（）{
var to_rad=Math.PI/180；
var circ=document.getElementById（'circ'）；
var circx=circ.getContext（'2d'）；
约宽=约高=50；
circx.beginPath（）；
约x.moveTo（45,25）；
圆弧（25,25,20,0,360*至_rad）；
circx.strokeStyle=“#00FFFF”；
circx.lineWidth=3；
circx.stroke（）；
circx.fillStyle='#FF00FF'；
circx.textAlign='中心'；
circx.font=“20px Arial”；
约x.fillText（“^”，25，25）；
circx.beginPath（）；
circx.lineWidth=2；
circx.strokeStyle=“#FF00FF”；
约x.moveTo（25,40）；
约x.lineTo（25,13）；
circx.stroke（）；
返回中国保监会；
}
（函数main（）{
var can=document.getElementById（'can'）；
var ctx=can.getContext（'2d'）；
var w=罐宽=200；
var h=罐。高度=150；
var to_rad=Math.PI/180；
ctx.fillStyle=“#000000”；
ctx.fillRect（0,0,w,h）；
var circ=makeCirc（）；
var-deg=0；
var dstep=360/60；
var dmax=360；
setInterval（函数（）{
ctx.fillStyle=“#000000”；
ctx.fillRect（0,0,w,h）；
placeImage（ctx、circ、w/2、h/2、deg）；
deg+=dstep；
deg%=dmax；
}, 1000);
})();