Rotating text with CSS and IE

Question

I need to rotate text with CSS. I have the following style rules but they do not appear to work in Internet Explorer.

.footer #descr span {
    -moz-transform: rotate(-20deg);  /* Firefox */
    -o-transform: rotate(-20deg);  /* Opera */
    -webkit-transform: rotate(-20deg);  /* Safari y Chrome */
    transform: rotate(-20deg);  /* Safari y Chrome */
    font-size:40px;
    display:block;
    float: left;
    margin: 0 10px 0 0;
}

How can I rotate text in IE with CSS?

Answer 1

Below IE9, Internet Explorer has effectively zero inbuilt support for CSS3 or any other standard web technologies such as SVG that would allow you to rotate text cross platform as you wish. Microsoft have included two ways of rotating elements (eg text) since IE6, however the more simple method only works in increments on 90 degrees, like so:

-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; /* 0=0, 1=90, 2=180, 3=270 */

If you really need to attain that 340/-20 degrees you included in your example then you will need to try your hand at something more difficult, documented here: MSDN Matrix Filter. Given how unnecessarily complex that looks, a quick Google search revealed a nice calculator that will generate an -ms-filter CSS rule for you: Matrix Calculator.

Bear in mind that both of these features are meant to be deprecated in IE9 which I believe supports -ms-transform instead. Depending on whether Microsoft defines deprecated as removed or advised against you may want to check that IE9 isn't rotating your text twice.

.footer #descr span {
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand')"; /* IE6-8 */
    -ms-transform: rotate(-20deg); /* IE9+ */
    -moz-transform: rotate(-20deg);  /* Firefox */
    -o-transform: rotate(-20deg);  /* Opera */
    -webkit-transform: rotate(-20deg);  /* Safari & Chrome */
    transform: rotate(-20deg);
    font-size:40px;
    display:block;
    float: left;
    margin: 0 10px 0 0;
}

To be perfectly honest though, if you are intending to make use of HTML5 and/or CSS3 then I would agree with Duopixel's answer that including a CSS3 library via javascript would be sensible. Given users of Windows XP cannot upgrade past IE8 then it is a good idea for any commercial site to support it.