Image rotation under IE and standard browser (i)--filter, CSS3

As for the rotation of the picture, there are generally 3 solutions: (1) filter (2) CSS3 (3) canvas. The next step is explained.

For the convenience of understanding, we mainly explain in 90 degrees, taking into account other angles.

1. Filter (ie exclusive)

1.1 Rotate Filter

The syntax is as follows:

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

Rotation values 0 (0 or 360 degrees), 1 (90 degrees), 2 (180 degrees), 3 (270 degrees). The other number is invalid.

Example of rotation 90 degrees:

Css:

#box {
width:100px;
height:200px;
Background: #e678cc;
Filter:progid:DXImageTransform.Microsoft.BasicImage (rotation=1);
}

Html:

<div id= "box" > I pour </div>

Effect

1.2 Matrices Filter Matrix

The syntax is as follows:

Filter:progid:DXImageTransform.Microsoft.Matrix (enabled= benabled, sizingmethod= Smethod, filtertype= stype, dx= fDx , dy= fDy, m11= fM11, m12= fM12, m21= fM21, m22= fM22)

The above is the complete parameters, we just focus on a few of them can be, simplified under:

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

Sizingmethod has two values: Clip to original (default, container does not change size, exceeds crop) and auto expand (the container changes size to fit the target image), we typically use auto expand.

The M11,M12,M21,M22 consists of a 2x2 matrix that can be rotated at any angle by calculating four values, and most of the rotation is controlled by these four parameters. Of course not tangled in the end is how the matter, because I do not understand, mathematics did not learn, hehe, we have to do is to use the rotation angle to replace roation, it is necessary to note that this angle of rotation is not the number of angles, but the number of radians, so we need to rotate the angle of degrees multiplied by 0.017453293 (2pi/360) put it in again. For example rotate 45 degrees, M11=cos (45*0.017453293), M12=-sin (45*0.017453293), M21=sin (45*0.017453293,m22=cos (45*0.017453293).

Example:

Css:

#box {
width:100px;
height:200px;
Background: #e678cc;
Filter:progid:DXImageTransform.Microsoft.Matrix (m11=0.7071067659112366,m12=-0.7071067964618581,m21= 0.7071067964618581,m22=0.7071067659112366,sizingmethod= ' Auto expand ');
}

Html:

<div id= "box" > I pour </div>

Effect

If we remove the Sizingmethod attribute, that is, using the default clip to original, the excess will be trimmed off, such as:

If we want to zoom in on the original basis, we just need to multiply the value of M11,M12,M21,M22 by 2 (m11=1.414,m12=-1.414,m21=1.414,m22=1.414), instead of dividing by 2 (m11=0.354,m12=-0.354, m21=0.354,m22=0.354).

Properties of the filter:

1. Rotate the top and left side of the original profile, such as:

Can you rotate around the center? Of course, we see that the complete matrix parameter has dx= fDx, dy= fdy, two values that describe a point in which the graph rotates around this point. Theoretically we can specify any point as the origin, but considering the actual needs and the majority of the students are not very good at math, we just need to know around the center point rotation is good. The formula is as follows:

Dx=-width/2*cos (roation) +height/2*sin (roation) +WIDTH/2,
Dy=-width/2*sin (roation)-height/2*cos (roation) +HEIGHT/2

The filter is spelled as follows:

Filter:progid:DXImageTransform.Microsoft.Matrix (dx= fDx, dy= fDy, m11= fM11, m12= fM12, m21= fM21, m22= fM22);

The M11,M12,M21,M22 algorithm is the same as it was said earlier.

Note: We see that the Sizingmethod value is not set because Microsoft Official notes that DX DY fails when the Sizingmethod value is auto expand. And the parts of the original size that are beyond the rotation are hidden, and if you want to show them all, we need to scale the rotated image or leave enough space.

For example, we rotate an image by 90:

(1) Convert 90 degrees to radians

* (2 * math.pi/360) = 1.5707963267948966

(2) Calculate values for cos (roation) and sin (roation)

cos (1.5707963267948966) = 6.123233995736766E-17

Sin (1.5707963267948966) = 6.123233995736766E-17

(3) Calculating the values of dx and dy

Assuming our picture is 300px wide and 200px high, bring into the equation:

Dx=-width/2*cos (roation) +height/2*sin (roation) +WIDTH/2

dx= -300/2*6.123233995736766e-17 + 200/2 * 6.123233995736766e-17 + 300/2=250

Dy=-width/2*sin (roation)-height/2*cos (roation) +HEIGHT/2

Dy=-200/2*6.123233995736766e-17-200/2*6.123233995736766e-17+200/2=-50

(4) Bring the above values into the filter formula:

Filter:progid:DXImageTransform.Microsoft.Matrix (dx= fDx, dy= fDy, m11= fM11, m12= fM12, m21= fM21, m22= fM22);

Get:

Filter:progid:DXImageTransform.Microsoft.Matrix (dx=, dy= -50, m11= 6.123233995736766e-17, m12=-6.123233995736766 E-17, m21= 6.123233995736766e-17, m22= 6.123233995736766e-17);

Effect

Take a closer look, isn't there something wrong after the spin? After rotating the picture seems to be cut, so it is necessary to say why. First look at the picture:

Do you get it? We set the rotation around the center point 90 degrees, the filter rotation is in the original image occupied space to rotate, after the rotation of the part of the default is not displayed, if the auto expand property is set, the container will follow the image transformation to adapt to its size, but before we already know, using this property, can cause dx and dy to be invalid, there are two solutions: one is to scale. The other is to give it enough space (seen on the web as if it were padding). I personally prefer the previous one, so I'll explain the previous one.

What we need to do is to say that the rotated image is scaled down so that the height of the rotation looks the same as the width of the space occupied by the original image, so we need to calculate this ratio: R = Height/width, and then use that scale to multiply with M11,M12,M21,M22.

(1) Bring the wide-height into the acquisition ratio: r= 200/300 = 2/3

(2) Multiply the M11,M12,M21,M22 by 2/3 to bring into the filter:

Filter:progid:DXImageTransform.Microsoft.Matrix (dx=, dy= -50, m11= 4.082155997157844e-17, m12=-4.082155997157844 E-17, m21= 4.082155997157844e-17, m22= 4.082155997157844e-17);

OK, done, look at the effect:

2. Actual changes to elements after rotation (IE6 and 7,IE8 and 9 do not change)

Note: IE high-version analog low version and IETester are not accurate and need to be tested in a real-world or standalone version to find the difference.

Two articles for reference:

Internet Explorer matrix filters matrix rotation and scaling and the development of combined transform

Using matrix filter to rotate around center point under IE

2. CSS3 Rotation Properties

Syntax: Transform:rotate (XDEG)

For example, we need to rotate 90 degrees, can write Transform:rotate (90deg), support negative numbers, integers are clockwise rotation, negative when the counter-clockwise rotation, such as we need to rotate 315 degrees, you can write Transform:rotate (315deg), You can also write Transform:rotate ( -45deg). and rotation 90 degrees as an example, the effect

As we can see, this property rotates at the center point as the origin, and the excess part does not get cut off like the IE Filter Center rotation, retains its original size, and rotates without changing the actual size of the element.

This property is the CSS3 property, so the browser is required for CSS3 support to work. Most standard browsers support this property in terms of their private properties, so we can still use it as follows:

-moz-transform:rotate (0DEG); Firefox

-webkit-transform:rotate (0DEG); Chrome and Safari

-o-transform:rotate (0DEG); Oprea

-ms-transform:rotate (0DEG); IE9

For browsers that support CSS3, using Transform:rotate for IE series that do not support CSS3, we can make a picture rotation compatible with most browsers, which is part of my next plugin pop-up layer, so we can streamline it, Remove the demo from the pop-up layer and rotate the parameter in 90 degree increments.

Example:

Javascript:

<script type= "Text/javascript" src= "Jquery-1.8.2.min.js" ></script>
<script type= "Text/javascript" >
$ (function () {
/* Automatically calculates horizontal vertical center */
function Reset () {
$ ("#img_box"). CSS ({
"Position": "Absolute",
"Top": "50%",
"Left": "50%",
"Z-index": "10000",
"Margin-top": function () {return-($ (this). Height ())/2},
"Margin-left": function () {return-($ (this). Width ())/2}
});
}

Reset ();

/* Rotate counter right and left */
var deg = 0;
$ ("#turn_r"). Click (function () {
deg++;
deg = deg > 3? 0:deg;
Rotate (deg);
return False
});

$ ("#turn_l"). Click (function () {
deg--;
deg = deg < 0? 3:deg;
Rotate (deg);
return False
});

/* Dynamically increase rotation properties */
function rotate (i) {

switch (i) {
Case 0:
$ ("#img_box"). attr (' style ', ' filter:progid:DXImageTransform.Microsoft.BasicImage (rotation=0); zoom:1;- Moz-transform:rotate (0DEG); -webkit-transform:rotate (0DEG); -o-transform:rotate (0deg); ');
Break
Case 1:
$ ("#img_box"). attr (' style ', ' filter:progid:DXImageTransform.Microsoft.BasicImage (rotation=1); zoom:1;- Moz-transform:rotate (90DEG); -webkit-transform:rotate (90DEG); -o-transform:rotate (90deg); ');
Break
Case 2:
$ ("#img_box"). attr (' style ', ' filter:progid:DXImageTransform.Microsoft.BasicImage (rotation=2); zoom:1;- Moz-transform:rotate (180DEG); -webkit-transform:rotate (180DEG); -o-transform:rotate (180deg); ');
Break
Case 3:
$ ("#img_box"). attr (' style ', ' filter:progid:DXImageTransform.Microsoft.BasicImage (rotation=3); zoom:1;- Moz-transform:rotate (270DEG); -webkit-transform:rotate (270DEG); -o-transform:rotate (270deg); ');
Break
}
Reset ();
}

})
</script>

Css:

#box {
width:300px;
height:200px;
Background: #f2f2f2;
position:relative;
Text-align:center;
}
#img_box img {
padding:3px;
border:1px solid #cccccc;
Background: #fff;
}
#turn_l,
#turn_r {
Display:inline-block;
Margin:0 20px;
}

Html:

<div id= "box" >
<div id= "Img_box" ></div>
<a href= "/" id= "turn_l" > Left rotation </a>
<a href= "/" id= "Turn_r" > Rotate Right </a>
</div>

Compatible with Ie6-9,firefox, etc., effect

3. Canvas

Article too long, an article can not be saved.

Image rotation under IE and standard browser (ii)--canvas

Image rotation under IE and standard browser (i)--filter, CSS3