jQuery围绕点旋转Div

我环顾了一下四周，但没有找到与答案相似的答案

我试图让一些div元素围绕一个中心点旋转。我已经让他们改变了学位的位置，但是他们不会滑来滑去，他们只是跳跃，而且跳水运动员自己也会改变他们的方向

以下是jQuery：

$("document").ready(function(){
//arrange blocks in a circle
var block = $("#rotator div").get(),
increase = Math.PI * 2 / block.length,
x = 0, y = 0, angle = 0;

for (var i = 0; i < block.length; i++) {
    var elem = block[i];
    x = 140 * Math.cos(angle) + 150;
    y = 140 * Math.sin(angle) + 150;
    elem.style.position = 'absolute';
    elem.style.left = x + 'px';
    elem.style.top = y + 'px';
    var rot = 90 + (i * (360 / block.length));        
    angle += increase;
}
        $('.click').click(function() {

            var rotateDegree = $(this).data('rotate');


            $('#rotator').css({
                 '-moz-transform':'rotate(' + rotateDegree + 'deg)',
                 '-webkit-transform':'rotate(' + rotateDegree + 'deg)',
                 '-o-transform':'rotate(' + rotateDegree + 'deg)',
                 '-ms-transform':'rotate(' + rotateDegree + 'deg)',
                 'transform':'rotate(' + rotateDegree + 'deg)'
            });
        });

$（“文档”）.ready（函数（）{
//把方块排成一个圆圈
var block=$（“#rotator div”）.get（），
增加=Math.PI*2/block.length，
x=0，y=0，角度=0；
对于（变量i=0；i

}))

这是小提琴：

---

如果有人能帮我解决这个问题，我将非常感激

你能提供一些45度旋转后的状态和90度旋转后的状态的图形形式吗？这样你就可以清楚地知道你想要做什么。div应该保持直立。然后平滑地滑动到角度上的下一个div。所以内容总是正确的。