Compatible with all browser rotation effects-ie filter matrix and Css3transform

In modern browsers using CSS3 transform style can be easily done, but for domestic IE browser (especially 7,8) also occupies a large share of the case, compatibility still must be considered, so also deliberately recorded under the use of IE rotation filter.

There are two types of rotary filters under IE:

The first type:

CSS Styles

Filter:progid:DXImageTransform.Microsoft.BasicImage (Rotation:1)

Where the rotation attribute has only four values: 0,1,2,3, respectively, are: 0 degrees, 90 degrees, 180 degrees, 270 degrees. To view the reference documentation, click here, but it is not appropriate to rotate any of the other methods above, which requires the following method.

The second Kind

CSS Styles

Filter:progid:DXImageTransform.Microsoft.Matrix (enabled=benabled, Sizingmethod=smethod, Filtertype=stype, DX=FDX, Dy=fdy, M11=fm11, M12=fm12, M21=fm21, M22=FM22)

• Enabled: Defines whether the filter is disabled, the value range is a Boolean value, the filter is available when the value is true, and the filter is not allowed when the value is false.
• Sizingmethod: Defines whether an element changes properties when using a picture. When the value is clip to original, the element does not change size, and when the value is auto expand, the element changes size.
• FilterType: Defines how the element rotates. When the value is bilinear, use a smooth, static display effect; Nearest Neighhbor is typically used in dynamic filters.
• Dx: Defines the amount of vector increase in the horizontal direction. The size of the increment is defined with a floating-point number, and the default value is 1.0.
• Dy: Defines the amount of vector increase in the vertical direction. The size of the increment is defined with a floating-point number, and the default value is 1.0.
• M11: Defines where to display the horizontal direction of the right edge of the element. The size of the increment is defined with a floating-point number, and the default value is 1.0. When the value is greater than 1.0, the right line moves to the right, while the width of the element is stretched; When the value is less than 1.0, the right edge moves to the left, reducing the width of the element.
• M12: Defines where the bottom side edge of the element is displayed horizontally. Use a floating-point number to define the size of the increment, which is 0 o'clock by default. When the value is greater than 0 o'clock, the bottom line moves to the right, while the width of the element is stretched; When the value is less than 0 o'clock, the bottom edge moves to the left and the width of the element is stretched.
• M21: Defines the display position of the right edge of the element in the vertical direction. The size of the increment is defined with a floating-point number, and the default value is 0. When the value is greater than 0 o'clock, the bottom edge moves downward, while the height of the element is extruded, and when the value is less than 0 o'clock, the bottom edge moves upward, while the height of the element is extruded.
• M22: Defines where the bottom side edge of an element appears in the vertical direction. The size of the increment is defined with a floating-point number, and the default value is 1.0. When the value is greater than 1.0, the bottom edge moves down, while the height of the element is stretched, and when the value is less than 1.0, the right edge moves up and the height of the element is reduced.

These are all the parameters of this filter, but usually use the most parameters only 5, so it can be simplified to:

CSS Styles

Filter:progid:DXImageTransform.Microsoft.Matrix (Sizingmethod=smethod, M11=fm11, M12=fm12, M21=fm21, M22=FM22)

Sizingmethod generally select "Auto expand", which differs from the value of "clip to original" (45 degrees of rotation in the figure):

Here's how to calculate the rotation value, that is, how to calculate the value of the M11,M12,M21,M22.

Actually also very simple, with calculator calculate can, if you want to do rotate animation, then need JS to calculate, M11=cos (angle value), M12=-sin (angle value), M21=sin (angle value), M22=cos (angle value). For example: If you want to rotate 10 degrees, then sin (10) is about =0.174,cos (10) about = 0.985, so four values correspond to: m11=0.985,m12=-0.174,m21=0.174,m22=0.985

I also want to mention here that the IE matrix filter can also zoom in and out, similar to the zoom style, by multiplying the M11,M12,M21,M22 value by the corresponding multiple.

Ps: In IE6 and IE7 if the filter is written in the <style> label or style sheet, the following two questions appear,

• The style after this filter will be invalidated;
• Rotate filter Only one of the pages is allowed.

The solution for these two points is to embed the filter style directly on the element label. t_t

If there is a better solution can leave a message. To learn more about matrix filters, please poke here and here

This is compatible with the CSS3 style transform for all browsers to achieve the rotation effect.

Source: http://www.csscool.net/ie-matrix-and-css3-transform.html

Compatible with all browser rotation effects-ie filter matrix and Css3transform