title: Pacman | Rotate div element with jQuery or CSS
body: <p>I have created a Pacman figure in CSS that is moving in 4 steps: right, down, left and up using this jQuery code:</p>
  
  <pre><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 &lt; iStepsLength; i++) {
      $('#P1').animate({
          left: aSteps[i].x,
          top: aSteps[i].y,
      });
  }
  </code></pre>
  
  <p><strong>You can see it here:</strong>
  <a href="http://jsfiddle.net/qE6wm/2/" rel="nofollow">http://jsfiddle.net/qE6wm/2/</a></p>
  
  <p>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 <em>-webkit-transform: rotate(90deg);</em> to the animation. But then it is rotating while it is moving and not right before.</p>
  
  <p>Does any of you have a good idea on how to do it?  </p>