JavaScript IE rotation transform maths

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]));
eleme开发者_如何学编程nt.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?

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 compose 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 compose 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 compute 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 compute 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 combined on my site: http://kirilloid.ru/

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

You should check https://github.com/heygrady/transform/wiki/correcting-transform-origin-and-translate-in-ie for a comprehensive 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.com/

HTH