How to Rotate Elements in IE9 using CSS3 Transform?

CSS3 Transforms in IE9: Rotation

This article aims to solve the problem of rotating elements in IE9.

Question

In the design, we need a vertical element. Although CSS works fine in all browsers except IE9. We used the filter attribute in IE7 and IE8:

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

However, this caused the element to become transparent in IE9 and the CSS3 "transform" property seemed to have no effect!

Answer

Standard CSS3 rotation should work in IE9, but we think a vendor prefix needs to be added, like this:

-ms-transform: rotate(10deg);

It may not be available in the beta version; if not, try downloading the current preview version (Preview 7), which is a newer version than the beta version. We don't have a beta version of the beta so can't confirm if it's in that version. The final version is definitely planned to support it.

We can also confirm that the IE-specific filter attribute has been removed in IE9.

Further documentation

It is said to be very limited but we did find this page: http://css3please.com/ which is useful for all browsers Useful for testing various CSS3 features in the browser.

But testing the rotation feature on this page in IE9 preview causes it to crash horribly.

However, we independently tested -ms-transform:rotate() in IE9 on our own test page and it worked just fine. Therefore, our conclusion is that the feature is implemented, but with some bugs, probably related to dynamic settings.

Another useful reference point for determining which features are implemented in which browsers is www.canIuse.com -- see http://caniuse.com/#search=rotation

Latest Update

Reposting this old answer because we recently learned about a hack called CSS Sandpaper that is related to the problem and might make things simpler .

This hack implements support for standard CSS transforms in older versions of IE. So now you can add the following to your CSS:

-sand-transform: rotate(10deg);

... and have it work in IE 6/7/8 without using the filter syntax. (Of course, it still uses the filter syntax under the hood, but this is made easier by using a syntax similar to other browser syntaxes.)

The above is the detailed content of How to Rotate Elements in IE9 using CSS3 Transform?. For more information, please follow other related articles on the PHP Chinese website!