Pacman | Rotate div element with jQuery or CSS

Question

I have created a Pacman figure in CSS that is moving in 4 steps: right, down, left and up using this jQuery code:

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,
    });
}

You can see it here: http://jsfiddle.net/qE6wm/2/

As a next step, I want my Pacman to rotate in a 90deg right before i moves to the next step. I've tried adding the -webkit-transform: rotate(90deg); to the animation. But then it is rotating while it is moving and not right before.

Does any of you have a good idea on how to do it?

Answer 1

I have this idea:

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/

Is that ok? :)

Answer 2

Another solution, but I just prefer to keep off css from javascript

http://jsfiddle.net/6euPg/

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

var rotations = ["turn-90", "turn-180", "turn-270", "turn-360" ];
var iStepsLength = aSteps.length;

for (var i = 0; i < iStepsLength; i++) {

    (function(i) {

        $('#pacman').animate({
            left: aSteps[i].x,
            top: aSteps[i].y,
        }, function() {
            this.className = rotations[i]; // this applies the class for rotation
        });

     }(i));
}

CSS

.turn-90 {  transform: rotate(90deg);   }
.turn-180 {  transform: rotate(180deg); }
.turn-270 {  transform: rotate(270deg); }
.turn-360 {  transform: rotate(360deg); }