Dragging & Resizing CSS Transformed Elements

Viewed 11071

If for instance, we set a -vendor-transform: rotate(40deg) css attribute on a rectangle <div>, all the sudden dragging and resizing becomes very weird and flawed.

Here is an example with a simple jQueryUI: http://jsfiddle.net/Ja4dY/1/

You will notice, that if you drag or resize that rectangle when transformed, it will jump up or down and the cursor will not remain in the correct place. In my real code I'm using custom code for resizing and dragging, however I encountered the same problems.

Well, of course the "problem" is that the direction of an Element will change. So left can be right, top gets bottom and something inbetween and the Javascript code still handles each direction as it would be not transformed.

So, the question: How can we compensate transformed / rotated Elements ?

Any good resources / books / blogs are also very welcome.

7 Answers
Related