[css3-2d-transforms] [css3-3d-transforms] MouseEvent coordinates after CSS3 transform?

Hello,

Suppose the user clicks on some element, and I want to know precisely  
where the user has clicked. For instance, let's say I want to mark the  
exact position with a red dot, and this red dot must be added inside the  
element (appendChild).

Until now, we can find the precise coordinates by doing simple Math:
ev.clientX - this.getBoundingClientRect().left - this.clientLeft +  
this.scrollLeft


Now let's suppose the element being clicked has a CSS3 transformation  
applied to it. Or, even more complicated, the element has been transformed  
and is inside another transformed element. After these arbitrary  
transformations, finding the coordinates relative to the element become a  
quite difficult feat.

So, here comes my question: How to find such coordinates?


As far as I know, it is currently not possible. (or it would require  
re-implementing all transformations in some kind of JavaScript library)


If this is the case, then I believe we need some kind of DOM interface  
that convert coordinates. Maybe something like:

Element.convertCoordinates(x, y, referenceElement);

It would convert the x,y coordinates that are originally relative to  
referenceElement into coordinates relative to Element.


This is my first message to a w3.org list, and I'm not sure where I should  
give this feedback.


There is a small experiment without CSS transformations:
http://jsfiddle.net/7CKyT/5/
And with CSS transformations (and, thus, broken):
http://jsfiddle.net/7CKyT/6/

I've also asked this question here:
http://stackoverflow.com/questions/6773481/how-to-get-the-mouseevent-coordinates-for-an-element-that-has-css3-transform


-- 
Denilson Figueiredo de Sá

Received on Saturday, 23 July 2011 15:05:45 UTC