javascript - 吃 bean 人|使用jQuery或CSS旋转div元素

我已经在CSS中创建了一个Pacman图，它分为4个步骤：右、下、左和上，使用以下jQuery代码：

var aSteps = [{
    "x": "400",
    "y": "0"
}, {
    "x": "400",
    "y": "300"
}, {
    "x": "0",
    "y": "300"
}, {
    "x": "0",
    "y": "0"
}];

var iStepsLength = aSteps.length;
for (var i = 0; i < iStepsLength; i++) {
    $('#P1').animate({
        left: aSteps[i].x,
        top: aSteps[i].y,
    });
}

你可以在这里看到：
http://jsfiddle.net/qE6wm/2/
下一步，我希望我的Pacman在我进入下一步之前旋转90度。我试过将-webkit transform:rotate（90度）添加到动画中。但是当它移动的时候它就在旋转，而不是之前。
你们中有人知道怎么做吗？

最佳答案

我有个想法：

var iStepsLength = aSteps.length;
for (var i = 0; i < iStepsLength; i++) {
    var rotation = 0;
    $('#P1').animate({
        left: aSteps[i].x,
        top: aSteps[i].y,
    }, 2500, function () {
        rotation = rotation + 90;
        $(this).css({
            'transform': 'rotate(' + rotation + 'deg)',
                '-ms-transform': 'rotate(' + rotation + 'deg)',
                '-webkit-transform ': 'rotate(' + rotation + 'deg)'
        });
        });
    }

http://jsfiddle.net/qE6wm/3/
可以吗？:)