Question

I have read a few other posts on Stack Overflow and did some Googling but so far have not seen anything that is actually working.

I have an h2 I want to rotate 270 degrees in all browsers plus IE6/7. All browsers, FF, Safari, Chrome, IE7, etc., rotate the text just fine but IE6 just won’t rotate 270. I can only get it to rotate 90 which isn’t what I need.

Here is the HTML:

<div class="tab-content">
    <h1>Lorem Ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>

And here is the CSS:

.tab-content h1 {
    -webkit-transform: rotate(270deg);  
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
    filter:progid:DXImageTransform.Microsoft.Matrix(M11=-0.00000000, M12=1.00000000, M21=-1.00000000, M22=-0.00000000,sizingMethod='auto expand');
    zoom: 1;
    font: 15px Arial, Helvetica, sans-serif;
    color: #4b4b4c;
    text-transform: uppercase;
}

I tried

writing-mode: tb-rl;
filter: flipv fliph; 

as well and that will rotate it 90 degrees but not 270 like I want.

I tired with & w/o zoom:1; and I’m running out of ideas. Any one have a good grasp of rotating text in ie6? There are a lot of articles on rotating images and such but not much on text and I figured it would be the same image or heading…

Answer 1

The matrix transformation filter that you’re using can rotate by any angle, so you should be able to use this to rotate to 270 degrees if you want to. It has some quirks, but it does work. It’s just a shame that the matrix maths is so painful. This article gives a very good overview of how to work out the angles: http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/

But if you specifically want to rotate 270 degrees, then you don’t need to use the (frankly hideous) matrix filter, because IE also has a much more friendly BasicImage filter.

Try this:

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

The BasicImage filter is only useful if you want to rotate in multiples of 90 degrees. Anything else, and you need to do the matrix transform.

The rotation=3 tells it to rotate 90 degrees, 3 times — ie 270 degrees.

Hope that helps.