jQuery resizable draggable flickring for CSS3 transform

Question

Using CSS attribute I set 45degree for transform for a div. I bind the div with draggable and resizable. Everything is working fine If the div has 0degree for transform.

BUT if the div has any degree means while resizing the div shift to left and top. This is happening only for the div has any degree.

Please check the links in my comment box. Please do the resize from direction sw, nw, ne

Sorry the links are not acceptable in this editor. Fiddle

html

<div id="parent">
    <div id="mydiv">my para</div>
</div>

js

 $(function() {
        $( "#mydiv" ).resizable({
            containment: 'parent',
            handles: 'n, e, s, w, ne, se, sw, nw',
        })
        .draggable();
});

css

#mydiv {
    transform:rotate(60deg);
    -webkit-transform': rotate(60deg);
    -moz-transform': rotate(60deg);
    -webkit-transform: rotate(60deg) translate3d(0, 0, 0);
    width:300px;
    height:200px;
    background-color:yellow;
}

#parent {
    width:500px;
    height:600px;
    margin:450px 0 0 150px;
}

Answer 1

see if this helps:

You can get the current transformation matrix that is applied to an element by using getComputedStyle(). You can use this to transform the current mouse position to its position in transformed space and see whether the click/drag events are within the element boundary and/or corners. Good resources for this:

http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/

http://www.eleqtriq.com/2010/05/css-3d-matrix-transformations/

Dragging & Resizing CSS Transformed Elements

also see what jquery guys have to say

http://bugs.jqueryui.com/ticket/8618