Jquery 圆形动画

我希望所有文本保持笔直。当圆圈移动时。请 这是我的密码

var smallCircle=$（“.circle main ul li”）.长度；
var eachRotate=360/小圆；
var circleDimansion=3；
对于（i=0；小圆圈>=i；i++）{
$（“.circle main ul li”）.eq（i）.css（'transform'，'rotate（'eachRotate*i+'deg'）；
$（“.circle main ul li”）.eq（i）.children（'div'）.css（'transform'，'rotate（-“+eachRotate*i+'deg”）；
}

.circle main、.circle wrap、.circle main:before、.small circle、，
.circle{border radius:50%；-moz border radius:50%；-ms border radius:50%；-o-border-radius:50%；-webkit border radius:50%；}
@关键帧旋转{到{变换：旋转（1圈）；}
@关键帧响应{到{变换：旋转（-1圈）；}
正文{字体系列：Arial，Helvetica，无衬线；字体大小：14px；颜色：#333；背景：url（bg.jpg）中心重复#054e79；背景大小：封面；高度：100%；位置：绝对；宽度：100%；溢出：隐藏；}
.circle wrap{宽度：500px；高度：500px；位置：绝对；顶部：0；左侧：0；右侧：0；底部：0；边距：自动；}
.圆主{位置：绝对；顶部：0；左侧：0；宽度：100%；高度：100%；边框：1px实心#306c91；
动画：旋转60秒线性无限；
动画播放状态：正在运行；}
.circle main:before{position:absolute；content:“；top:5px；left:5px；right:5px；bottom:5px；border:1px solid#165983；}
.circle main:悬停{动画播放状态：暂停；}
.circle main ul{位置：绝对；宽度：100%；高度：100%；边距：0；左侧：0；填充：0；顶部：0；}
.circle main ul li{位置：相对；宽度：100%；背景：红色；位置：绝对；列表样式：无；左侧：0；顶部：50%；}
.circle main ul li.小圆{位置：绝对；右侧：-35px；宽度：70px；高度：70px；文本对齐：中心；线条高度：70px；背景：#fff；颜色：#333；字体大小：24px；}
.circle main ul li.小圆{动画：respin 60s线性无限；动画播放状态：running；}
.circle main:悬停ul li.小圆{动画播放状态：暂停；}

1.


2.


3.


4.


5.


6.


7.


8.


9


10

每个

。小圆圈

旋转不正确，因为JS正在设置旋转，但随后您正在CSS中设置同一元素旋转的动画。相反，您需要做的是只旋转数字本身，而不是旋转校正的

。小圆圈

我在每个数字周围添加了一个

div.number

包装器，并对其应用了

respin

动画。现在它按预期工作

var smallCircle=$（“.circle main ul li”）.长度；
var eachRotate=360/小圆；
var circleDimansion=3；
对于（i=0；小圆圈>=i；i++）{
$（“.circle main ul li”）.eq（i）.css（'transform'、'rotate（'+eachRotate*i+'deg'）；
$（“.circle main ul li”）.eq（i）.children（'div'）.css（'transform'，'rotate（'+eachRotate*i+'deg'）；
}

.circle main，
.圆形包装，
.circle main:之前，
.小圆圈，
.圆圈{
边界半径：50%；
-moz边界半径：50%；
-ms边界半径：50%；
-o-边界半径：50%；
-webkit边界半径：50%；
}
@关键帧旋转{
到{
变换：旋转（1圈）；
}
}
@关键帧响应{
到{
变换：旋转（-1圈）；
}
}
身体{
字体系列：Arial、Helvetica、无衬线字体；
字体大小：14px；
颜色：#333；
背景：url（bg.jpg）中心重复#054e79；
背景尺寸：封面；
身高：100%；
位置：绝对位置；
宽度：100%；
溢出：隐藏；
}
.圆形包装{
宽度：500px；
高度：500px；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
保证金：自动；
}
.circle main{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
边框：1px实心#306c91；
动画：旋转60秒线性无限；
动画播放状态：运行；
}
.绕道主线：在{
位置：绝对位置；
内容：“；
顶部：5px；
左：5px；
右：5px；
底部：5px；
边框：1px实心#165983；
}
.主转盘：悬停{
动画播放状态：暂停；
}
.圆主ul{
位置：绝对位置；
宽度：100%；
身高：100%；
保证金：0；
左：0；
填充：0；
排名：0；
}
周大里{
位置：相对位置；
宽度：100%；
背景：红色；
位置：绝对位置；
列表样式：无；
左：0；
最高：50%；
}
.圆圈主ul li.小圆圈{
位置：绝对位置；
右：-35px；
宽度：70px；
高度：70像素；
文本对齐：居中；
线高：70px；
背景：#fff；
颜色：#333；
字体大小：24px；
}
.圆圈主ul li.小圆圈.编号{
动画：60年代线性无限；
动画播放状态：运行；
}
.主圆圈：悬停ul li.小圆圈.编号{
动画播放状态：暂停；
}

1.


2.


3.


4.


5.


6.


7.


8.