CSS3 transform does not change an element's left position?


Can someone explain why using the following CSS code doesn't change an element's left position?

element {

This does the same in a different way but changes the left position:

element {

I have chosen the first method in combination with CSS3 transitions to trigger hardware acceleration on mobile Safari.

EDIT Some clarification: it looks like transform changes the left position but if you want to get the left position with Javascript it returns 0.

Problem courtesy of: DADU


Position transforms (aka translations) do not change the reported position of an element and this the correct behavior. When you transform an element you create a new local coordinate system that is not reflected in left/right properties (or any other properties) since as far as the rest of the page is concerned the element is still in its original position (aka - when you transform an element, the page doesn't reflow to reflect its new position). This makes sense when you think about scales.skews etc. - the other stuff that you can do with transforms.

Update: if you want to do the heavy lifting, the currently applied transformation matrix is reported via window.getComputedStyle()

Update: someone pointed out that getBoundingBox now correctly adjusts for transforms and translations

Solution courtesy of: Michael Mullany


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.