Javascript 如何将屏幕坐标转换为z变换元素上的坐标？

我有一个z变换的元素，它有一个标记作为子元素，我需要将该标记放在鼠标单击的位置

我需要知道如何将屏幕坐标转换为z变换元素上的坐标

这是我目前的代码：

函数getPosition（screenCoords）
{
//这个函数应该返回z变换元素的x和y坐标，我不知道如何实现。
返回{x:2500，y:1500}；
}
变量$viewport=$（“.viewport”）；
变量$marker=$（“.marker”）；
$viewport.on（“单击”，函数（e）{
e、 预防默认值（）；
var newMarkerPosition=getPosition（{x:e.pageX，y:e.pageY}）；
$marker.css({
左：newMarkerPosition.x+“px”，
顶部：newMarkerPosition.y+“px”
});
});
html，正文{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
}
.视口{
宽度：100%；
身高：100%；
溢出：隐藏；
透视图：1000px；
透视来源：50%50%；
}
.z-变换元素{
宽度：5000px；
高度：3000px；
变换原点：2500px 1500px；
背景颜色：灰色；
位置：相对位置；
转换：translateX（-2500px）translateY（-1500px）translateZ（-10000px）；
}
.马克{
左：0；
排名：0；
宽度：200px；
高度：200px；
左边距：-100px；
利润上限：-100px；
背景色：红色；
边界半径：100px；
位置：绝对位置；
}
这里最困难的部分似乎是将点击的屏幕空间坐标转换为转换后的坐标。一种方法是使用函数（在应用所有变换后返回对象的维度/位置），并使用其维度计算元素的显示维度与其“实际”维度之间的比率

获得此比率后，只需将其与单击坐标相乘（将其偏移为相对于元素显示的中心坐标后），即可获得转换后的单击坐标

我在您的代码中添加了以下内容，以展示如何使用此方法将CSS转换的元素移动到鼠标单击位置：


函数getPosition（screenCoords）
{
var$transformedEl=$（“.z-transformed-element”）；
//计算元件的“实际”中心
变量元素中心={
x:$transformedEl.innerWidth（）/2，
y:$transformedEl.innerHeight（）/2
}
//确定显示尺寸与“实际”尺寸的比率
var boundingRect=$transformedEl[0]。getBoundingClientRect（）；
var dimRatio=$transformedEl.innerWidth（）/boundingRect.width；
//确定偏移单击坐标（相对于图元的显示中心）
变量clickOffset={
x:screenCoords.x-$transformedEl.offset（）.left-boundingRect.width/2，
y:screenCoords.y-$transformedEl.offset（）.top-boundingRect.height/2
}
//计算点击坐标，相对于元素的“实际”中心和显示尺寸与“实际”尺寸的比率
var FinalCords={
x:elementCenter.x+单击偏移量.x*dimRatio，
y:elementCenter.y+单击偏移。y*dimRatio
}
归还最终订单；
}
变量$viewport=$（“.viewport”）；
变量$marker=$（“.marker”）；
$viewport.on（“单击”，函数（e）{
e、 预防默认值（）；
console.log（e.pageX，e.pageY）；
var newMarkerPosition=getPosition（{x:e.pageX，y:e.pageY}）；
$marker.css({
左：newMarkerPosition.x+“px”，
顶部：newMarkerPosition.y+“px”
});
});
html，正文{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
}
.视口{
宽度：100%；
身高：100%；
溢出：隐藏；
透视图：1000px；
透视来源：50%50%；
}
.z-变换元素{
宽度：5000px；
高度：3000px；
变换原点：2500px 1500px；
背景颜色：灰色；
位置：相对位置；
转换：translateX（-2500px）translateY（-1500px）translateZ（-10000px）；
}
.马克{
左：0；
排名：0；
宽度：200px；
高度：200px；
左边距：-100px；
利润上限：-100px；
背景色：红色；
边界半径：100px；
位置：绝对位置；
}

非常有魅力！不知道getBoundingClientRect（）。这似乎让事情变得更容易。谢谢！很高兴我能帮忙！这对我来说也是一个学习的经历。但是现在我尝试旋转元素，它开始计算错误的坐标。你们能想出一些同样适用于旋转元素的方法吗？我对rotateX和rotateY很感兴趣。@GiedriusT不幸的是，我怀疑这会将问题的范围扩大一点（我最初使用转换矩阵的想法现在可能还不过分）。想一个新的问题吗？好吧，我会对此提出一个新的问题。