CSS3变换不会更改元素的左侧位置？

Question

有人可以解释为什么使用下面的CSS代码不会更改元素的左侧位置？

element { 
-webkit-transform:translate3d(200px,0,0); 
} 

这确实以不同的方式相同的，但改变了左边位置：

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

我所选择的第一种方法结合CSS3过渡到触发移动的Safari硬件加速。

编辑 一些澄清：它看起来像变换更改的左侧位置，但如果你想获得左侧位置的JavaScript则返回0

Answer 1

位置变换（又名翻译）不改变的报告位置元素，这是正确的行为。当你转换一个元素时，你会创建一个new local coordinate system，它不会反映在左/右属性（或任何其他属性）中，因为就页面的其余部分而言，元素仍然处于其原始位置（又名 - 当您转换元素，页面不会回流以反映其新位置）。当您考虑scale.skews等时，这是有道理的 - 您可以使用变换来完成的其他任务。

更新：如果你想要做繁重，当前应用的变换矩阵通过window.getComputedStyle（）报告

更新：有人指出，现在getBoundingBox正确调整的转换和翻译