Summary----Close picture rotation

According to the following address, http://www.zhangxinxu.com/wordpress/?p=552

CSS3: (with compatibility restrictions)

-webkit-transform:rotate ( -90deg);-moz-transform:rotate ( -90deg);  transform:rotate ( -90deg);

IE Filter:

Filter:progid:DXImageTransform.Microsoft.BasicImage (rotation=3);

"Rotation=3", here the parameters can be 0,1,2,3, but there is no 4,5 .... The value here *π/2= the degree of selection, which is multiplied by 90 degrees. But only limited to a multiple of 90 degrees, if you want to break through this limitation, you can use the following matrix transformation of the way to get rotated 60 degrees, IE8 to use-ms-filter instead of filter

Filter:progid:DXImageTransform.Microsoft.Matrix (m11=0.5,m12=-0.866,m21=0.866,m22=0.5,sizingmethod= ' Auto expand ' );

This is the formula, where the rotation represents an angle, such as 60,

Filter:progid:DXImageTransform.Microsoft.Matrix (M11=cos (roation), M12=-sin (roation), M21=sin (roation), M22=cos ( roation), sizingmethod= ' Auto expand ');

Contrast

CSS3 rotation does not change the placeholder size may overwrite other elements, ie filter will change the extrusion of other elements

It is easy to rotate without considering opera,<firfox2, otherwise it is implemented using canvas:

Canvas is an HTML element, no behavior, but provides an API to JS drawing to a canvas;

IE implemented under:

<!--[if Ie]><script type= "Text/javascript" src= "Http://www.zhangxinxu.com/style/js/excanvas.js" ></ script><! [endif]--(here to prevent comment conflicts, double-wired separated by a space)

The link is the JS plugin that enables IE to support canvas most

jquery's spin plugin (ie filter + other browser using canvas)

　　

Summary----Close picture rotation