在CSS3D元素上查找屏幕坐标的局部坐标

Question

我有一个具有3D透视变换元素的网页。

我想找到给定屏幕坐标的变换对象上的相对坐标。换句话说，我想要做的是基本命中检测：在元素上找到与鼠标坐标相对应的相对坐标。

在Chrome/Safari中，找到元素的透视变换矩阵是微不足道的。我相信我需要做一些事情，比如将屏幕坐标乘以透视矩阵的逆矩阵，但是细节很遗憾地丢失在我身上。

我创建了一个镀铬/ Safari/Webkit的兼容的jsfiddle与部分实现缺乏矩阵数学：http://jsfiddle.net/HT2VQ/

如果正确的数学在那里的元素上绘制的蓝色圆环将围绕红点。

这是我的CoffeeScript从的jsfiddle：

projectionMat = new WebKitCSSMatrix container.css('-webkit-transform') 
window.onmousemove = (e) -> 
    insideX = e.clientX - container.position().left 
    insideY = e.clientY - container.position().top 

    outsideCursor.css 
     left: e.clientX 
     top: e.clientY 

    # Do something with projectionMat/projectionMat.inverse() 
    # insideX = ?? 
    # insideY = ?? 

    insideCursor.css 
     left: insideX 
     top: insideY 

Answer 1

我发现，没有通过手webkitConvertPointFromNodeToPage做矩阵数学的Webkit的有效的解决方案：

point = webkitConvertPointFromPageToNode(container.get(0), 
             new WebKitPoint(e.clientX, e.clientY)) 

工作的jsfiddle：http://jsfiddle.net/mlawrie/HT2VQ/5/