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-transfo         


        

Answer 1

The only thing that worked for my situation was to use CSS Sandpaper - once I had that integrated, I tried the following CSS code...

#vertbar p.name {
    -sand-transform: rotate(180deg);
}

and voila! IE rotated the text vertically, reading from bottom-to-top. However, in all other browsers, this orientation is considered 270 degrees.

I now had other browsers rotating the text at a different angle to IE, as if the IE coordinate system is back-to-front (I wouldn't be surprised...)

I thought I'd try a conditional comment to serve the -sand-transform rule to IE browsers only. For whatever reason, IE ignored this and so the rotation wasn't even applied (does IE10 ignore conditional comments?)

So now I had the problem of getting all browsers to do it the same. Rearranging the order of the rules and setting 180 degrees for IE and 270 degrees for the others, I finally had a CSS rule that worked to rotate the text vertically, reading bottom-to-top, in Firefox, Chrome, Safari and IE!

#vertbar p.name {
    -sand-transform: rotate(180deg);
    -webkit-transform: rotate(270deg) !important;
    -moz-transform: rotate(270deg) !important;
    -o-transform: rotate(270deg) !important;

    font-size: 14px;
    text-transform: capitalize;
    display: block;
    white-space: nowrap;
    height: 330px;
    text-align: left;
    color: #FFF;
    line-height: 40px;
    margin-top: 0px;
}

Hurray! Hopefully this is of help to someone, I wasted over 2 hours trying to get this sorted. :P

Update: Just wanted to make a correction - 270 degrees is 270 degrees in all browsers. I discovered that I had another rule with a rotation of 90 degrees, which was being added to a second rule of 180 degrees, to give a total of 270. So it was interesting to note the rotation value is relative (additional?) rather than absolute.