To get a local position in a div is not directly possible.
Usually this is easy, just get the position of the parent and subtract.
But when the parent has been transformed (rotated or translated) it can be a REAL problem.
If you do not want to use matrix, because you are animating your divs with rotate and left and top, there is a solution that works cross-browser.
It's just not very simple.
Here is the JSfiddle: http://jsfiddle.net/Cr5wF/6/
Div (id:rot) is moved and rotated. The yellow dot is inside the grey area. On mouse move over the grey area the yellow dot is repositioned to fall exactly over the mouse.
NOTE: We cannot use transform-origin, because it is not supported by IE.
This is not a practical library, but more a proof of concept.
Note: just checked on my iPad and something is wrong... The grey object isn't moving..
No idea why yet..
Geen opmerkingen:
Een reactie posten