如何使用jQuery旋转六边形

Question

我尝试旋转六边形是基于它的边缘，但它看起来很奇怪！

这是我的代码：

$('.hexagon1')
.animate({ // 1
    marginTop:29,
    marginLeft:-50,
    borderSpacing:60
},{
    duration:'slow',
    step:function(now,fx) {
        $(this).css('transform','rotate('+(-now)+'deg)');
        $(this).css('transform-origin','left');
    }
},'linear')
.animate({ // 2
    marginTop:85,
    marginLeft:-50,
    borderSpacing:120
},{
    duration:'slow',
    step:function(now,fx) {
        $(this).css('transform','rotate('+(-now)+'deg)');
        $(this).css('transform-origin','left');
    }
},'linear')
.animate({ // 3
    marginTop:175,
    marginLeft:-100,
    borderSpacing:180
},{
    duration:'slow',
    step:function(now,fx) {
        $(this).css('transform','rotate('+(-now)+'deg)');
        $(this).css('transform-origin','left');
    }
},'linear')
.animate({ // 4
    marginTop:260,
    marginLeft:-50,
    borderSpacing:240
},{
    duration:'slow',
    step:function(now,fx) {
        $(this).css('transform','rotate('+(-now)+'deg)');
        $(this).css('transform-origin','left');
    }
},'linear')
.animate({ // 5
    marginTop:260,
    marginLeft:50,
    borderSpacing:300
},{
    duration:'slow',
    step:function(now,fx) {
        $(this).css('transform','rotate('+(-now)+'deg)');
        $(this).css('transform-origin','left');
    }
},'linear')
.animate({ // 6
    marginTop:175,
    marginLeft:100,
    borderSpacing:360
},{
    duration:'slow',
    step:function(now,fx) {
        $(this).css('transform','rotate('+(-now)+'deg)');
        $(this).css('transform-origin','left');
    }
},'linear');    

http://jsfiddle.net/UserNaN/GvLhR/

如果您只是看看我的问题并分享一些科学知识，我将非常感激。谢谢！