Jquery ui旋转图像调整大小问题

Question

I have an issue, I am using jquery ui resizable. When I rotate the element in chrome, the controls get rotated too but when i resize the div with handles, they are inverted. I mean if i am using sw control, it acts in weird way ie i move towards top and the image gets bigger while in actual it should get smaller. This is the problem with rotated divs only not the normal ones.

Here is the js fiddle

http://jsfiddle.net/fahadnabbasi/2FLuf/11/

You will see two images, one rotated and one normal. Normal works fine for resizing while rotated one resizes as well but in opposite direction. Try to resize the rotated image from the bottom right control and you will see the problem.

Answer 1

I think you need jQuery UI Rotation http://vremenno.net/js/jquery-ui-rotation-using-css-transform/ (it's Russian). Here is a direct download: http://vremenno.net/examples/jquery-ui-rotation/jquery.ui.rotation.zip

Here is a fiddle I made up that implements the plugin: http://jsfiddle.net/MadLittleMods/4Vfm5/

After including the plugin just add. You can also add a parent div and apply it to that with .parent() :

$('.resizable').rotatable();

Here is another topic that talks about rotating: jquery rotation plugin - that works like jquery ui resize