CSS3 in IE using cssSandpaper

By Patrick Lin

A few months back, I wrote an article about Giving Elements Cool Effects Using CSS3. One of the major disappointments at the time of the writing of that article was a lack of support. Back then, Firefox, Safari, Chrome, and variants supported all effects, with Opera 10.5 slated to support them.

Now, Opera 10.5 has been released, and a wide variety of browsers support these effects, with the exception of Internet Explorer, which we all know will not support things like that natively for a while.

Well, actually, it does for some of them. For one thing, Internet Explorer actually supports transforms, and has for a while now. But the syntax for doing it is ridiculous and incredibly time-consuming. Remember that the CSS3 for transforming looks like this:

.element {
	transform: rotate(10deg);
}

In Internet Explorer, it looks something like this:

.element {
	filter:progid:DXImageTransform.Microsoft.Matrix(M11='0.7071067811865476',
	M12='0.7071067811865475', M21='-0.7071067811865475'
	,M22='0.7071067811865476', sizingmethod='auto expand');
}

I won’t even begin to pretend I understand what any of that is. As far as I could tell, it’s probably something to do with radians and matrices.

So imagine my excitement when I came across something called cssSandpaper, which takes care of all the conversion from easy-to-understand numbers to the complex Microsoft method for you.

You can read all about cssSandpaper and how to use it at the original site, User Agent Man.

Tags: css

This entry was posted on Monday, March 22nd, 2010 at 09:50:42. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

• RSS
• Tweet this!
• Delicious
• Facebook
• DFloat
• DMoo
• E-mail