1

假设我有一个基本上是 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),我想我需要应用某种给定我使用这个新矩形的原始点的矩阵变换对吗?抱歉,我真的不懂计算机图形学理论,只是想尝试这种方式看看它会起作用

4

0 回答 0