Как получить экранную позицию CSS3-3d преобразованных элементов?

У меня очень сложный сайт, построенный на CSS3, который имеет html-элементы, 3D-трансформированные, повернутые, перевернутые, флоппированные и просто искаженные.

Я пытаюсь выяснить местоположение на экране одного из этих элементов и не вижу никакого способа сделать это. Мне было интересно, есть ли у кого-нибудь изобретательные идеи.

В качестве альтернативы, если кто-то может объяснить математику за -webkit-perspective, я могу понять позицию как единственную вещь, которую я не уверен, как моделировать.

Ответ 1

Вы пытались использовать getBoundingClientRect()?

Я использовал его в прошлом для вычисления размеров элементов, которые были преобразованы с помощью свойства transform.

Ответ 2

Проблема состоит в том, что преобразования CSS3 фактически не изменяют положение элементов. Конечно, браузеры "знают", что они перегруппированы, потому что они отображают их, но эта информация не возвращается обратно в DOM/API.

Единственное, что я могу придумать, - это рассчитать позиции, основанные на самих преобразованиях, поскольку они являются "простыми" матричными преобразованиями.

К сожалению, класс Algebra был слишком давно, что я больше не могу сказать вам, как это сделать - только это возможно.

Ответ 3

Использование getBoundingClientRect - хорошая идея, но даст вам только координаты прямоугольника, который содержит вашу фигуру, а не точные координаты 4 верхних, нижних, нижних, верхних углах.

Вы могли бы сделать это, взяв каждую из этих не трансформированных координат и применив преобразование через javascript.