IE Rotary filter Matrix

Rotating an element is a more common need, in support CSS3 browser can be used transform easily implemented, here is the introduction: http://www.css88.com/archives/2168, here is the demo/http Www.css88.com/tool/css3Preview/Transform.html, it is no longer introduced.

If you rotate an element under IE, you can only rely on the filter.

If you are only rotating in 90-degree units, simply use this filter:

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=i)

Where I take 0,1,2,3, respectively, representing rotation 90 degrees, 180 degrees, 270 degrees, 360 degrees.

If you want to achieve any angular rotation, use the matrix filter.

Here's how it's done online:

Filter:ProgID:DXImageTransform.Microsoft.Matrix(M11=m11,m12=m12 ,m21 =m21,=m22 ,sizingmethod= "auto Expand"       

Set the rotation angle to X, expressed in radians. So M11=cos (x), M12=-sin (x), M21=sin (x), M22=cos (x)

The induction formula for sine sin (edge-to-side ratio hypotenuse) sin (2kπ+α) =sinα
Sin (π/2-α) =cosα
Sin (π/2+α) =cosα
Sin (-α) =-sinα
Sin (π+α) =-sinα
The induction formula of sin (π-α) =sinα cosine cos (adjacent edge ratio hypotenuse) cos (2kπ+α) =cosα
cos (π/2-α) =sinα
cos (π/2+α) =-sinα
cos (-α) =cosα
cos (π+α) =-cosα
cos (π-α) =-cosα

This method is effective, but it rotates around the left and top of the original contour of the element, or draws a schematic diagram:

, the graphic will be rotated on top and left.

So what do we do if we're going to spin around the middle point? It's a long story, it's about the vector method of geometry.

In the coordinate system, each point has a coordinate, such as a point P (3,4), a horizontal axis of 3, and an ordinate of 4.

Next, the vector: simply understood as a line segment with a direction.

A vector op is formed by connecting the point to the origin and the direction from the origin point to the point.

In this way, we map the vectors to point one by one, and we can use vectors to study the points.

Next, we study the essence of rotation, p point around the origin O (clockwise) rotation angle α, that is, the vector op rotation α, the new point P ' coordinates change (3cosα-4sinα,4sinα+3cosα).

Why this is the value,

is rotated and wants to know the coordinates after rotation:

Or

See Http://zh.wikipedia.org/wiki/%E6%97%8B%E8%BD%AC (Math has a positive counterclockwise direction, so the formula is slightly different on the symbol)

In the new coordinates above, the number of calculations performed on the original coordinates is exactly the cosα,-sinα,sinα,cosα of the above IE matrix m11,m12,m21,m22!

In fact, the above calculation is generally written in the form of a matrix, see the way Wikipedia is represented.

So, the essence of the matrix filter is the matrix operation of the coordinates of the graph.

The above is the rotation around the origin o, if the winding is a non-origin point? The situation is more complicated, see http://hi.baidu.com/windsion/blog/item/b4a41951699aa0c9b645ae4f.html.

Is broadly divided into three steps:

1. The overall displacement, that is, the center point and the vector to do the corresponding displacement, so that the rotation point into the original point
2. Rotate around the origin, as it says.
3. The overall displacement, then move the center point back to the original place.

At this point, the computed matrix becomes complex (at the bottom of the article above).

In fact, this matrix can be simplified, see here Http://stackoverflow.com/questions/5051451/javascript-ie-rotation-transform-maths

Finally, we get an additional two numbers in addition to the above M11,M12,M21,M22, and these two numbers are represented as dx,dy in the IE Matrix filter.

By writing these six parameters to the matrix filter, you can rotate around the center point.

The complete wording:

ProgID:DXImageTransform.Microsoft.Matrix(Dx=Dx,Dy=dy , m11=,m12 =m12,m21=m21 ,m22 =m22       

which

Dx=-Width/2*Cosdeg+Height/2*Sindeg+Width/2,Dy=-Width/2*sindeg-height /2* cosdeg+/2 M11,m12 ,m21 , m22  

Oh, yes, Microsoft officially said http://msdn.microsoft.com/en-us/library/ms532872 (v=vs.85) aspx, if sizingmethod= "Auto expand", then DX, DY is not valid OH. So it's good to get rid of it.

Finally, what does sizingmethod mean, if you do not set it, the size of the container of the rotating object will be fixed, so there may be a case of occlusion, oneself to adjust the size, and if it is set to auto expand, is the meaning of automatic expansion, That is, the size of the container outside the rotation is automatically adjusted so that the element being rotated is not obscured.

IE Rotary filter Matrix