I am working on setting the rotation of an element with JavaScript, I know this is easy to achieve if you want to set to a 90 degree angle but this is not what I want. Because I want to set to strange angles such as 20 degrees I need to use the transform filter. I know the layout of this but I was wondering how I calculate the four values, at first I tried this.

calSin = Math.sin(parseInt(css[c]));
calCos = Math.cos(parseInt(css[c]));
element.style.filter = 'progid:DXImageTransform.Microsoft.Matrix(M11=' + calCos + ', M12=-' + calSin + ',M21=' + calSin + ', M22=' + calCos + ', sizingMethod="auto expand")';

But as you can see, this was never going to work, I was just taking a stab in the dark. Due to maths not being my strong point I was wondering if anyone could help me calculate the values?

Thanks.

EDIT

Okay! Got it working with the following code.

radians = parseInt(css[c]) * Math.PI * 2 / 360;
calSin = Math.sin(radians);
calCos = Math.cos(radians);
element.style.filter = 'progid:DXImageTransform.Microsoft.Matrix(M11=' + calCos + ', M12=-' + calSin + ',M21=' + calSin + ', M22=' + calCos + ', sizingMethod="auto expand")';

But now the question is how do I make it rotate from the center rather than top left?

I am working on setting the rotation of an element with JavaScript, I know this is easy to achieve if you want to set to a 90 degree angle but this is not what I want. Because I want to set to strange angles such as 20 degrees I need to use the transform filter. I know the layout of this but I was wondering how I calculate the four values, at first I tried this.

calSin = Math.sin(parseInt(css[c]));
calCos = Math.cos(parseInt(css[c]));
element.style.filter = 'progid:DXImageTransform.Microsoft.Matrix(M11=' + calCos + ', M12=-' + calSin + ',M21=' + calSin + ', M22=' + calCos + ', sizingMethod="auto expand")';

But as you can see, this was never going to work, I was just taking a stab in the dark. Due to maths not being my strong point I was wondering if anyone could help me calculate the values?

Thanks.

EDIT

Okay! Got it working with the following code.

radians = parseInt(css[c]) * Math.PI * 2 / 360;
calSin = Math.sin(radians);
calCos = Math.cos(radians);
element.style.filter = 'progid:DXImageTransform.Microsoft.Matrix(M11=' + calCos + ', M12=-' + calSin + ',M21=' + calSin + ', M22=' + calCos + ', sizingMethod="auto expand")';

But now the question is how do I make it rotate from the center rather than top left?

• javascript
• internet-explorer
• math
• rotation
• transform

Share Improve this question Follow edited Feb 19, 2011 at 15:16 Olical asked Feb 19, 2011 at 14:52 OlicalOlical 41.5k1212 gold badges5757 silver badges7777 bronze badges 2

• See edit for the new question. I have managed to rotate it but it needs to rotate from the center, not top left. – Olical Commented Feb 19, 2011 at 15:17
• Okay, I have deduced that it is working perfectly other than it does not hang over the edges unlike the other browsers. In chrome it rotates so the corners stick outside the page a bit, in IE the element moves to keep its corners inside. Anyone know how I can stop this? – Olical Commented Feb 19, 2011 at 15:27

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

There actually is a way to do what you're trying to do using just the ie matrix transformation filter.

in addition to M11, M12, M21, M22, the matrix also has two additional properties: Dx and Dy for translation. Unfortunately, you can't just translate by a constant amount. In order to rotate about the center of the object, you need to pose three transformation.

First, translate the center of the object to the origin. Second, rotate the object. Third, translate from the origin back to where the center belongs.

IE does not have the ability to pose multiple matrices itself, so you have to do the linear algebra yourself. Suppose theta is the angle by which you want to rotate, and suppose that the object's width is 2w while its height is 2h. (So w and h are the HALF width and height respectively.) Let c and s stand for cos(theta) and sin(theta) respectively.

The matrix product you want to pute is then:

    [[1 0 w] [[c -s 0] [[1 0 -w]
     [0 1 h]  [s  c 0]  [0 1 -h]
     [0 0 1]] [0  0 1]] [0 0  1]]

which equals:

    [[ c           -s           (-wc + hs + w)]
     [ s            c           (-ws - hc + h)]
     [ 0            0                   1     ]]

So, if you pute the two quantities (-wc + hs + w) and (-ws -hc + h) and add them to your filter as Dx and Dy respectively, the end result will be that the rotation is about the center of the object.

I have coded this up and tested it for a project in which I needed to animate having an object rotate about its center, and this worked for me.

For rotate from the center, you'll need to add Dx and Dy to IE filter, then add displacement via css and add css hacks to increase elements' width and height in IE.

You may look how it's bined on my site: http://kirilloid.ru/

Actually this is more CSS-related question, than javascript.

You should check https://github./heygrady/transform/wiki/correcting-transform-origin-and-translate-in-ie for a prehensive 50%,50% transform origin IE hack. Be careful, there are a few typos in the last function, here is the correct block:

var matrices = {
    tl: matrix.x($M([0, 0, 1])),
    bl: matrix.x($M([0, y, 1])),
    tr: matrix.x($M([x, 0, 1])),
    br: matrix.x($M([x, y, 1]))
};

You will also need the Sylvester library: http://sylvester.jcoglan./

HTH