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

Question

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

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

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

Answer 1

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

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

Answer 2

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

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

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

Answer 3

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

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