Jquery 如何像8号球一样旋转跳水

我想旋转一个圆形的div，像8个球。就像8个球一样，在这个div中有一个背景为白色的数字。球是如何旋转的，就像这个div应该通过单击按钮来旋转一样。此外，旋转时，数字也应改变

我已经完成了我的想法，但失败了，它只在重新加载时起作用，旋转不正确，我也不知道如何更改数字

*{
框大小：边框框；
}
.八个球{
宽度：400px；
高度：400px；
溢出：隐藏；
位置：相对位置；
边界半径：50%；
显示：内联块；
背景：rgb（33139220）；
背景：moz线性梯度（顶部，rgba（33，139，220，1）0%，rgba（14，92，154，1）100%）；
背景：-webkit线性梯度（顶部，rgba（33、139、220、1）0%，rgba（14、92、154、1）100%）；
背景：线性梯度（至底部，rgba（33、139、220、1）0%，rgba（14、92、154、1）100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#218bdc'，endColorstr='#0e5c9a'，GradientType=0）；
}
.八球内白{
宽度：300px；
高度：300px；
溢出：隐藏；
位置：绝对位置；
顶部：30px；
左：6px；
边界半径：50%；
显示：内联块；
过渡：全部缓解0.5s；
背景：rgb（224235 245）；
背景：-moz线性梯度（顶部，rgba（224235，245，1）0%，rgba（190205，214，1）100%）；
背景：-webkit线性梯度（顶部，rgba（224235，245，1）0%，rgba（190205，214，1）100%）；
背景：线性梯度（到底部，rgba（224235 245，1）0%，rgba（190205，214，1）100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#e0ebf5'，endColorstr='#becdd6'，GradientType=0）；
}
.八球内白跨{
颜色：#222b32；
位置：绝对位置；
最高：50%；
左：50%；
字体大小：152px；
变换：平移（-50%，-50%）旋转（16度）；
}
.旋转球{
-webkit动画：将球线性旋转2秒；
-moz动画：旋转球线性2s；
-ms动画：将球线性旋转2秒；
-o-动画：将球线性旋转2秒；
动画：将球线性旋转2秒；
}
.旋转球。旋转球{
-webkit动画：ballspinlinear2s；
-moz动画：ballspinlinear2s；
-ms动画：ballspin linear 2s；
-o-动画：球自旋线性2s；
动画：球旋转线性2秒；
}
@-webkit关键帧ballspin{
0% {
左：6px；
顶部：30px；
}
50% {
左：170%；
顶部：150px；
}
100% {
左：6%；
顶部：30px；
}
}
@-webkit关键帧旋转球{
0% {
变换：旋转（0度）；
}
50% {
变换：旋转（120度）；
}
100% {
变换：旋转（220度）；
}
}

88
生成球

$（函数（）{
$（'#genBall'）。在（“单击”，函数（）{
$（'.8ball'）.addClass（“旋转球”）；
setTimeout（RemoveClass，1200）；
});
函数RemoveClass（）{
$（'8个球'）。移除类（“旋转球”）；
}
}); 
。八个球{
宽度：500px；
高度：500px；
保证金：自动；
溢出：隐藏；
位置：相对位置；
边界半径：50%；
背景：#1f84d0；
显示：内联表；
过渡：全部缓解0.5s；
变换样式：保留-3d；
}
.八个球：之后{
内容：“；
宽度：100%；
身高：100%；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
不透明度：0.7；
边界半径：50%；
变换：旋转（-137度）；
框阴影：插入50px 0 70px 6px rgb（0,0,0），
插图-3px 0 6px 2px rgba（255,255,255,0.8）；
}
.八球内白{
宽度：400px；
高度：400px；
溢出：隐藏；
位置：绝对位置；
边界半径：50%；
显示：内联块；
过渡：全部缓解0.5s；
背景：rgb（224235245）；
变换样式：保留-3d；
转换：转换（6px，30px）；
/*盒影：0px 0px 27px rgba（0,0,0,0.5）*/
-webkit动画：3s中的第一旋转轻松；
-moz动画：3s中的第一个旋转轻松；
-ms动画：3s中的第一个旋转轻松；
-o型动画：3s中的第一个旋转轻松；
动画：3秒钟内第一次旋转；
背景：-moz线性梯度（顶部，rgba（224235245,1）0%，rgba（190205214,1）100%）；
背景：webkit线性梯度（顶部，rgba（224235245,1）0%，rgba（190205214,1）100%）；
背景：线性梯度（至底部，rgba（224235245,1）0%，rgba（190205214,1）100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#e0ebf5'，endColorstr='#becdd6'，GradientType=0）；
}
.旋转球。旋转球{
-webkit动画：ballanim linear 4s；
-莫兹动画：巴拉尼姆线性4s；
-ms动画：巴拉尼姆线性4s；
-o-动画：巴拉尼姆线性4s；
动画：巴拉尼姆线性4s；
}
@关键帧巴拉尼姆{
0%{变换：平移（6px，30px）比例（1）旋转（0deg）旋转（0deg）；宽度：400px；}
50%{变换：平移（250%，30px）比例（0.3）旋转（-60度）旋转（-5度）；宽度：200px；}
100%{变换：平移（300%，30px）比例（0.2）旋转（-60度）旋转（-5度）；宽度：200px}
}
@-webkit关键帧ballanim{
0%{变换：平移（6px，30px）缩放（1）旋转（0deg）旋转（0deg）倾斜（0deg，0deg）；宽度：400px；}
50%{变换：平移（250%，30px）比例（0.3）旋转（-60度）旋转（-5度）倾斜（-10度，-10度）；宽度：200px；}
100%{变换：平移（300%，30px）比例（0.2）旋转（-60度）旋转（-5度）倾斜（-10度，-10度）；宽度：200px；}
}
@先旋转关键帧{
0%{变换：平移（-100%，30px）比例（0.3）旋转（-80度）；宽度：250px；}
50%{变换：平移（6px，30px）比例（1）旋转（0度）；宽度：400px；}
100%{变换：平移（6px，30px）比例（1）旋转（0度）；宽度：400px；}
}
@-webkit关键帧第一次旋转{
0%{变换：平移（-100%，30px）比例（0.3）旋转（-80度）；宽度：250px；}
50%{变换：平移（6px，30px）比例（1）旋转（0度）；宽度：400px；}
100%{变换：平移（6px，30px）比例（1）旋转（0度）；宽度：400px；}
}
.八球内白跨{
颜色：#222b32；
位置：绝对位置；
到