Rotate div with top-left corner in javascript

Question

please help, to rotate div to 90 degrees, based on a specific point, ie, top-left corner of that div in Internet Explorer 7 using javascript or jQuery or css or html.

I had tried with fiter,

filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.00000000, M12=-1.00000000, M21=1.00000000, M22=0.00000000,sizingMethod='auto expand');

This rotates the div to 90 degrees but the top-left corner is displaced.

Refer to this link: http://stackoverflow.com/questions/382591/rotating-a-div-element-in-jquery — zdrsh, Sep 28 '11 at 12:20

score 1 · Answer 1 · answered Nov 01 '12 at 14:58

1

You can actually have it rotate around a corner with the transform-origin CSS3 property. Read more on it here: W3C CSS3 2D Transforms - Transform Origin

answered Nov 01 '12 at 14:58

Nick George

327
3
9

score 1 · Answer 2 · answered Sep 28 '11 at 12:14

1

Your best bet would be to let the CSS do the rotate, and then use jQuery to reposition the element to a specified set of coordinates. AFAIK, you can't provide a filter and restrict its rotation about a fixed point

jQuery animate() may help.

answered Sep 28 '11 at 12:14

JamesHalsall

13,224
4
41
66

Thanks for the response, It might be ok for repositioning the coordinates for 90 degree, but I need different angles, like 50 degrees and so on. So it would be helpful if could rotate the div based on top-left point. – George Sep 29 '11 at 07:00
you misunderstand my answer... I am saying that you can do the rotation with the `filter` css property, and then use jQuery to move/reposition it to your desired coordinates (after its been rotated) – JamesHalsall Sep 29 '11 at 07:54
of course, I understood that but I don't know how to find the initial and final coordinate of that div before and after rotation? I thought it would be more easier if there is a way to rotate that div with top-left as its center. – George Sep 29 '11 at 08:39

score 0 · Answer 3 · answered Sep 28 '11 at 12:26

0

Try BasicImage rotate instead of matrix for a 90 degree rotation

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

answered Sep 28 '11 at 12:26

epascarello

204,599
20
195
236

Thanks for your response, I had tried this too but what I need is to rotate the div with it's top-left corner. By the way for achieving 90 degree rotation (filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);) – George Sep 29 '11 at 07:10

Rotate div with top-left corner in javascript

3 Answers3