Javascript 如何仅顺时针旋转圆

我正在使用HTML5和CSS3。 我想顺时针旋转所有的圆圈，当我们点击它的时候。 对于旋转圆，我只使用了CSS。 我添加了html和css，所有的圆圈都在点击时旋转，被点击的圆圈变亮，显示为白色圆圈

/*仅用于正确定位菜单*/
#菜单{
位置：相对位置；
宽度：230px；
保证金：0px自动；
顶部：100px；
左：37像素；
}
/*我们正在使用溢出：隐藏；所以我们需要创建一个假阴影*/
.人造阴影{
位置：绝对位置；
宽度：250px；
高度：250px；
顶部：0px；
左：0px；
盒影：0.50pxRGBA（0,0,0,0.3）；
边界半径：300px；
-webkit转换：所有0.4s线性；
-moz过渡：所有0.4s线性；
-ms转换：所有0.4s线性；
-o型过渡：所有0.4s线性；
过渡：所有0.4s线性；
z指数：-9999；
}
/*还可以更改人造阴影的宽度和高度*/
#检查时：已检查~。人造阴影{
宽度：250px；
高度：250px；
顶部：-75px；
左：-60px
}
/*因此，如果未选中该按钮，信息div将不会出现*/
#菜单#on check:未（：已选中）~.info{
不透明度：0；
}
/*以0.4s的延迟显示信息部分，为菜单提供完成初始操作的时间
扩展动画*/
#菜单#打开检查：已检查~.info{
-webkit转换：所有0.2s线性0.4s；
-moz过渡：所有0.2s线性0.4s；
-ms转换：所有0.2s线性0.4s；
-o型过渡：所有0.2s线性0.4s；
过渡：所有0.2s线性0.4s；
}
/*选中“打开”按钮时，将菜单项展开*/
#检查时：已检查~#菜单项{
宽度：250px；
高度：250px；
左：-60px；
顶部：-75px；
}
/*菜单项容器div的样式*/
#菜单项{
宽度：150px；
高度：150像素；
边界半径：100%；
背景：rgb（255,255,5）；
位置：绝对位置；
排名：0；
左：0；
z指数：-99；
溢出：隐藏；
-webkit掩码图像：url（数据：image/png；base64，ivborw0kgoaaaansuhueugaaaaaaaabcaiaacqd1peaaagxrfwhrtb2z0d2fyzqbbzg9izbwfnzvjlywr5ccllpaaaa5jrefuenpiygbgaagaagwaaaaaaaaaaaaaabcaiaacqd1peaaagxrfwhrtb2z0d2fyzqbbzg9izbwfwfnzvjlywcllpaaaa5j；
盒影：0.15px rgba（0,0,0,0.3）；
-webkit转换：所有0.4s线性；
-moz过渡：所有0.4s线性；
-ms转换：所有0.4s线性；
-o型过渡：所有0.4s线性；
过渡：所有0.4s线性；
}
/*我把菜单分为两个部分，顶部和底部*/
#菜单项。顶部，
#菜单项。底部{
宽度：100%；
浮动：左；
z指数：1；
身高：50%；
}
#菜单项。底部{
最高：50%；
}
/*中间部分主要是修复一个内容可能超过预期的bug
溢出时的边界半径：隐藏；设定*/
#菜单项，中间{
身高：100%；
空白：nowrap；
}
/* ------------------------------------------------------------ */
/*标签是包含图标的内容*/
#菜单项标签{
位置：绝对位置；
z指数：999999；
字号：2em；
边界半径：5px；
光标：指针；
文本阴影：1px 1px 0 rgba（255、255、255、0.1）；
}
/*在悬停的时候，我觉得它们看起来很漂亮，带点蓝色的光芒*/
#菜单项标签：悬停{
文本阴影：0 0 15px#a6d8f4；
}
/*是信息框，选择菜单项时会显示这些信息框*/
#菜单信息{
不透明度：0；
位置：绝对位置；
右：-225px；
顶部：-63px；
显示：内联块；
背景色：#d2d2d2；
填充：10px；
颜色：#3434；
z指数：999999；
字体：普通1.5em Arial，无衬线；
背景：4aacc5；
边框：1px实心#ddd；
字体大小：正常；
边界半径：8px；
宽度：200px；
}
.arrow img{
位置：绝对位置；
顶部：-106px；
左：45像素；
}
.箭头img img{
高度：30px；
宽度：30px
}
.info span{
宽度：30px；
高度：30px；
背景：#FFF；
边界半径：100%；
利润率：0px 5px 0 2px；
浮动：左；
}
/*隐藏收音机和复选框*/
#菜单输入[type='checkbox']，
输入[type='radio']{
显示：无；
}
/*正确定位图标*/
#菜单项。顶部。ss主页{
顶部：90px；
左：34px；
}
#菜单项。顶部。ss心形{
顶部：89px；
左：199px；
}
#菜单项。顶部。不锈钢指南针{
顶部：21px；
左：108px；
}
#菜单项.bottom.ssrss{
顶部：92px；
左：21px；
}
#菜单项。底部。ss星形{
顶部：181px；
左：162px；
}
#菜单项。底部。ss刷新{
顶部：183px；
左：60px；
}
/*下面的代码将菜单项旋转到正确的位置
单击每个按钮时*/
#信息主页：选中~#菜单项，
#菜单项。顶部。ss心形{
-webkit变换：旋转（50度）；
-莫兹变换：旋转（50度）；
-ms变换：rotateZ（50度）；
-o变换：旋转（50度）；
变换：旋转（50度）；
-webkit转换：-webkit转换1s易用性；
过渡：1s轻松过渡；
}
#心信息：选中~#菜单项，
#菜单项。顶部。ss主页{
-webkit变换：旋转（-77度）；
-莫兹变换：旋转（-77度）；
-ms变换：rotateZ（-77度）；
-o变换：旋转（-77度）；
变换：旋转（-77度）；
-webkit转换：-webkit转换1s易用性；
过渡：1s轻松过渡；
}
#信息rss：选中~#菜单项，
#菜单项。底部。ss星形{
-webkit变换：rotateZ（77度）；
-moz变换：rotateZ（77度）；
-ms变换：rotateZ（77度）；
-o变换：旋转（77度）；
变换：旋转（77度）；
-webkit转换：-webkit转换1s易用性；
过渡：1s轻松过渡；
}
#信息星：选中~#菜单项，
#菜单项.bottom.ssrss{
-webkit变换：rotateZ（-148deg）；
-moz变换：rotateZ（-148deg）；
-ms变换：rotateZ（-148deg）；
-o变换：旋转（-148deg）；
变换：旋转（-148deg）；
-webkit转换：-webkit转换1s易用性；
过渡：1s轻松过渡；
}
#信息刷新：选中~#菜单项，
#菜单项。底部。ss刷新{
-webkit变换：rotateZ（145度）；
-moz变换：rotateZ（145度）；
-ms变换：rotateZ（145度）；
-o变换：rotateZ（145度）；
变换：旋转（145度）；
-webkit转换：-webkit转换1s易用性；
反式
-77° + 360° = 283°

#info-heart:checked ~ #menu-items, #menu-items .top .ss-home { 
    -webkit-transform: rotateZ(283deg); 
    -moz-transform: rotateZ(283deg); 
    -ms-transform: rotateZ(283deg); 
    -o-transform: rotateZ(283deg); 
    transform: rotateZ(283deg); 
     -webkit-transition: -webkit-transform 1s ease-in;
     transition: 1s ease-in;
}

<input type="radio" id="info-compass" name="radio-check" onclick='rotateTo(0)' checked  />
<input type="radio" id="info-heart" name="radio-check" onclick='rotateTo(1)' />
<input type="radio" id="info-rss" name="radio-check" onclick='rotateTo(4)' />
<input type="radio" id="info-refresh" name="radio-check" onclick='rotateTo(3)' />
<input type="radio" id="info-star" name="radio-check" onclick='rotateTo(2)' />

#info-star:checked ~ #menu-items, #menu-items .bottom .ss-rss { 
     -webkit-transition: -webkit-transform 1s ease-in;
     transition: 1s ease-in;
}

var currentRotatePosition = 0;
var currentDegree = 0;

function rotateTo(newPosition)
{
    var shift = 0;
    switch(currentRotatePosition)    
    {
        case 0:
            switch(newPosition)
            {
                // other cases
            }
    }
}

$('#menu-items, #menu-items .bottom .ss-refresh').css({
    '-webkit-transform': 'rotateZ('+ currentDegree +'deg)',
    '-moz-transform': 'rotateZ('+ currentDegree +'deg)',
    '-ms-transform': 'rotateZ('+ currentDegree +'deg)',
    '-o-transform': 'rotateZ('+ currentDegree +'deg)',
    'transform': 'rotateZ('+ currentDegree +'deg)',
});