How to Rotate a DIV Element by a Specific Degree in Internet Explorer?

Rotating a DIV Using the CSS rotate Property in IE

The CSS rotate property is a powerful tool for transforming elements on a web page. However, IE users may encounter issues when attempting to rotate an element by a specific degree.

Problem

To illustrate the problem, consider the following style:

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

This style rotates the DIV to either 90, 180, 270, or 360 degrees. However, if the goal is to rotate the DIV by only 20 degrees, this approach is ineffective.

Solution

To rotate an element by a specific degree in IE, the following code is required:

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */

Note that the code for IE8 differs from that for IE6/7. To support all IE versions, both lines of code are required.

It should be noted that the numbers in the code represent Radians, not degrees. Thus, it may be necessary to convert the desired angle to Radians to achieve the desired rotation.

Other Browser Compatibility

All other modern browsers, including IE9 and IE10, support the CSS3 transform style. This enables the rotation of elements using the following code:

-moz-transform: rotate(45deg); /* FF3.5/3.6 */
-o-transform: rotate(45deg); /* Opera 10.5 */
-webkit-transform: rotate(45deg); /* Saf3.1+ */
transform: rotate(45deg); /* Newer browsers (incl IE9) */

Additional Considerations

• The IE6/7 syntax can cause problems in other browsers due to an invalid CSS character. To avoid this issue, specific IE styles can be placed in a separate stylesheet.
• CSS Sandpaper is a JavaScript library that enables the use of standard CSS code for rotations, even in older IE versions.
• IE9 has a quirk where using both the standard transform and the -ms-filter style can result in rendering issues. To avoid this, it is recommended to use the CSS Sandpaper polyfill instead.

The above is the detailed content of How to Rotate a DIV Element by a Specific Degree in Internet Explorer?. For more information, please follow other related articles on the PHP Chinese website!