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 {
-webkit-transform:translate3d(200开发者_运维问答px,0,0);
}

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

element {
position:absolute;
left:200px;
}

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.

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