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.