IE9 Supports CSS3 Transforms!
I can’t tell you how many times in the past I have wanted to rotate or skew an element in a web page. For the past year or so I have seen some really great examples of using the CSS3 Transforms module in other browsers, but not IE9. In reality the examples I was reviewing simply did not support IE9 transforms.
Internet Explorer 9 has supported CSS3 2D transforms since the 6th platform preview. Since the CSS3 transforms module has not yet been ratified by the W3C Microsoft, as well as the other browser vendors, all use vendor specific prefixes. For Internet Explorer 9 this prefix is –ms-. So for CSS3 transforms the two properties are –ms-transform and –ms-transform-origin. The Internet Explorer team has a nice write up on the use of the vendor specific prefixes and why they are used.
What is a 2D Transformation?
Simply put its manipulating a DOM element in an X & Y fashion. This can be moving it around the page, rotating and skewing it. So I thought I would volunteer myself as a test subject today and apply a full set of CSS transformations to see what happens. Here is an HTML snippet to display my friendly mug shot.
<div><img src="images/chrislove.jpg" class="transform-test"/></div>
Without the transformations applied you get a typical image displayed.
Now to add the IE9 CSS transformation property. This rule will move the image to the right 75 pixels, down another 100, then will shrink the by 25% and finally skew the image by 10 degrees in the vertical.
.transform-test
{
-ms-transform: translate(75px, 100px) scaleY(.75) skewY(10deg);
}
There you have it, me transformed into a more exciting mug shot! And you know it did not hurt one bit. I do want this to work in other browsers. So here is the updated rule with support for Chrome, Firefox and Opera added.
.transform-test
{
-ms-transform: translate(75px, 100px) scaleY(.75) skewY(10deg);
-webkit-transform: translate(75px, 100px) scaleY(.75) skewY(10deg);
-moz-transform: translate(75px, 100px) scaleY(.75) skewY(10deg);
-o-transform: translate(75px, 100px) scaleY(.75) skewY(10deg);
}
Of course older browsers will ignore these rules and the image will display the plain old way without the transformations. So feel free to start experimenting with transformations.