Get correct coordinates after CSS3 Transforms

Get correct coordinates after CSS3 Transforms


Job Description

Hi, Im performing CSS3 transforms (scale and rotate only needed) on container DIVs that contain other different smaller DIV elements ( in html5 )

These elements can be dragged around the screen. Everything works perfect before performing CSS3 transforms.
But after CSS3 transforms are applied, the coordinates and positions of items are not correct anymore. So dragging doesnt work well, neither any other positioning operation, all breaks.

You can test it here:

I need code that finds the correct coordinates and positions, width and height of the item after any scaling or rotating transform operation.

Your solution should allow me to drag the item perfectly after the scaling+rotating has been applied. You can take this code as base and correct it in this code:

I have read somebody suggesting that the solution may be in : getBoundingClientRect , but im not sure, it needs to be a solution that is consistent and it should work for the latest versions of Firefox, Chrome, Explorer and Safari.
Only for the latest versions, i dont need it working for old versions, just the latest versions is good enough

looking forward to your solution

Skills: test

Other open jobs by this client