Recently…

I had the opportunity to work on a web site for building and construction company based out of the Atlanta area.
They had a great idea for a dynamic event viewer for their projects and they commissioned me to develop this application for them.
Its basically a large horizontal arrow the width of the site wrapper with events spanning length-wise in time.

As the site development went on, the event viewer turned out to be working great, and is chock full of jQuery gems.

Well long story short, I needed to add event titles and I was running out of vertical space with the site, thanks to the big arrow.
Thus entered the proposition for rotated, or slanted, text for the titles.

I knew this would be a cinch with Firefox and Safari, knowing firsthand that they have great advanced CSS tools such as webkit.
Internet Explorer on the other was a pretty big hassle to overcome with rotating a simple span element.
After much research I found some not-so-simple documentation on IE’s Filtering properties and was quickly pointed to the Matrix property by my friend Jordan Dobson.

On to the Code

Basically, here is the source on how to do  a simple 45 degree rotation in Safari and Firefox, respectively:

#element {
position:absolute;
-webkit-transform :rotate(-45deg);
-moz-transform: rotate(-45deg);
}

Now Internet Explorer is a bit more complicated to do a simple 45 degree rotation or angle for an element. It take a rather long list of  object-oriented looking CSS followed by a bunch of long decimals…all of which I could care less to know exactly what each matrix parameter is doing.

#element {
position:absolute;
-ms-filter: 'progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)';
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
}

The cool part is that this code seems to work fairly well. The first line starting with -ms-filter is for IE version 8. The code below that looks more familiar is for version lower than 8.
So I think that the M11, M12, M21, and M22 are some sort of array of blocks that are multiply each other. I really am not a math whiz…but i did find a useful script hidden in the Miscrosoft Documentation.

For the future, I implemented the script into a calculator so you and I dont have to learn mathematical formula for something a simple sounding as CSS element rotation. Please use the follow as much as you would like – IE Matrix Rotation Calculator