Dear members,

In HTML page, I have a DIV tag with an image. The DIV tag is rotated in 60 Degree using CSS transform. Now the DIV and Image rotated in 60 Degree. The Div tag also contain the resize feature. I have used twinhelix resize script.

Before the rotate I can resize the DIV tag based on the opposite corner handle.

I have tracked the four corner points X,Y positions of the DIV tag in before and after rotations. Now I have the below values,

=> Div tag Width, Height,
=> Before rotate Top Left X Pos, Y Pos
=> Before rotate Top Right X Pos, Y Pos
=> Before rotate Bottom Left X Pos, Y Pos
=> Before rotate Bottom Right X Pos, Y Pos

=> After rotate Top Left X Pos, Y Pos
=> After rotate Top Right X Pos, Y Pos
=> After rotate Bottom Left X Pos, Y Pos
=> After rotate Bottom Right X Pos, Y Pos

=> Degree

=> Bounding box Width & Height
=> Bounding box Top Left X Pos, Y Pos

////////////////////////////
My problem is after the rotate I can resize the DIV tag but it does not work properly.

How can I resize the DIV tag based on the opposite corner handle while the DIV tag in rotation.
////////////////////////////

My Reference Website: polyvore.com

This site was implemented this resize & rotate feature. But I could not track the logic. They used some maths formula.

I tried last one week for finding the solution for this problem.

Please share your suggestions here............