Moving A Rotated Element In The Direction Of The Rotation In Javascript

This is a problem where firefox works just fine, while chrome has the problem. Opera has additional problems I need to adress and IExplore I haven't bothered testing yet (don't car

Solution 1:

The problem is that WebKit seems to set offset from the bounding box of the rotated element, while Firefox offsets it from the original bounding box, and then applies the rotation.

Place your finger at the corner of the car, rotate it, and then move it forward. The upper left corner of the car's bounding box (its furthest left and top points after rotation) will line up with your finger.

It seems to works fine in Firefox and WebKit if you use .css({ top: ... left: }) instead of .offset(), and set the following css style:

#carImage {
    position: relative;
    margin-left: -100px;
    margin-top: -51px;    
}

Demo: http://jsfiddle.net/jtbowden/2aeyP/2/