How to get the MouseEvent coordinates for an element that has CSS3 Transform?

I want to detect where a MouseEvent has occurred, in coordinates relative to the clicked element. Why? Because I want to add an absolutely positioned child element at the clicked location.

I know how to detect it when no CSS3 transformations exist (see description below). However, when I add a CSS3 Transform, then my algorithm breaks, and I don't know how to fix it.

I'm not using any JavaScript library, and I want to understand how things work in plain JavaScript. So, please, don't answer with "just use jQuery".

By the way, I want a solution that works for all MouseEvents, not just "click". Not that it matters, because I believe all mouse events share the same properties, thus the same solution should work for all of them.

Background information

According to DOM Level 2 specification, a MouseEvent has few properties related to getting the event coordinates:

• screenX and screenY return the screen coordinates (the origin is the top-left corner of user's monitor)
• clientX and clientY return the coordinates relative the document viewport.

Thus, in order to find the position of the MouseEvent relative to the clicked element content, I must do this math:

ev.clientX - this.getBoundingClientRect().left - this.clientLeft + this.scrollLeft

• ev.clientX is the coordinate relative to the document viewport
• this.getBoundingClientRect().left is the position of the element relative to the document viewport
• this.clientLeft is the amount of border (and scroll