CSS3 преобразование не меняет левую позицию элемента?

Question

Может кто-нибудь объяснить, почему использование следующего кода CSS не меняет левую позицию элемента?

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

Это делает то же самое по-другому, но меняет левую позицию:

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

Я выбрал первый метод в сочетании с переходами CSS3 для запуска аппаратного ускорения в мобильном Safari.

РЕДАКТИРОВАТЬ Некоторые пояснения: похоже, что преобразование изменяет левую позицию, но если вы хотите получить левую позицию сJavascript возвращает 0.

Answer 1

Преобразования положения (или переводы) не изменяют сообщаемую позицию элемента, и это правильное поведение. Когда вы преобразуете элемент, вы создаете новую локальную систему координат , которая не отражается в свойствах left / right (или любых других свойствах), поскольку в отношении остальной части страницы элемент все еще находится в его исходная позиция (иначе - когда вы трансформируете элемент, страница не переворачивается, чтобы отразить его новую позицию). Это имеет смысл, когда вы думаете о scale.skews и т. Д. - о других вещах, которые вы можете делать с преобразованиями.

Обновление: если вы хотите сделать тяжелую работу, текущая примененная матрица преобразования сообщается через window.getComputedStyle ()

Обновление: кто-то указал, что getBoundingBox теперь корректно корректирует преобразования и переводы