Относительное расположение элементов HTML над преобразованным элементом изображения
Допустим, у меня есть элемент изображения, который в основном представляет собой 2D-карту, и я применил к нему следующее CSS-преобразование (используя jQuery):
$('#img').parent().css("perspective","696px");
$('#img').css("transform","rotateX(59deg) rotateY(2deg) rotateZ(-41deg)");
Я применил это преобразование, чтобы получить эффект "фиктивной перспективы" для 2D-изображения, теперь у меня есть определенное количество координат, сопоставленных с этим изображением, которое указывает на положение X,Y в нем
То, что я хотел знать, есть ли какой-либо метод или способ для меня, чтобы вычислить "новую" позицию X,Y каждой точки с учетом этого преобразования
Просто чтобы прояснить, я не знаю теорий компьютерной графики, я просто пытался разработать это доказательство концепции и пытался найти лучший способ придать изображению HTML такой перспективный эффект и в то же время сохранить изображение интерактивным, позволяя пользователь нажимает на каждую точку, сопоставленную с этим изображением
Обновление 1
Я нашел метод с именем "getBoundingClientRect", который возвращает координаты прямоугольника после его преобразования ( https://developer.mozilla.org/en-US/docs/Web/API/element.getBoundingClientRect), и я думаю, что мне нужно применить какой-то вид преобразования матрицы с учетом моей исходной точки, используя этот новый прямоугольник, верно? извините, я действительно не понимаю теории компьютерной графики и просто хотел попробовать этот способ, чтобы увидеть, как это будет работать