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