Trouver les coordonnées locales d'une coordonnée d'écran sur l'élément CSS3D

Question

J'ai une page Web avec un élément qui a une transformation de perspective 3D.

Je voudrais trouver des coordonnées relatives sur cet objet transformé pour une coordonnée d'écran donnée. Ou en d'autres termes, je veux faire ce qui est fondamentalement la détection de coup: trouver une coordonnée relative sur l'élément qui correspond aux coordonnées de la souris.

Dans Chrome/Safari, il est trivial de trouver la matrice de transformation de perspective pour l'élément. Je crois que je dois faire quelque chose comme multiplier les coordonnées de l'écran par l'inverse de la matrice de perspective, mais les détails sont malheureusement perdus sur moi.

J'ai créé un Chrome/Safari/WebKit compatible jsFiddle avec une mise en œuvre partielle manque le calcul de la matrice: http://jsfiddle.net/HT2VQ/

Si le calcul correct, il y avait, le beignet bleu tiré sur l'élément entourerait le point rouge.

Ceci est mon coffeescript du 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

J'ai trouvé une solution qui fonctionne pour Webkit sans faire le calcul de la matrice à la main avec webkitConvertPointFromNodeToPage:

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

travail jsFiddle: http://jsfiddle.net/mlawrie/HT2VQ/5/