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正確調整的轉換和翻譯