Rotating a Text to 270 Degrees in IE8

Rotating a text to 270 degrees in IE8

Try using this:

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.00000000, M12=1.00000000, M21=-1.00000000, M22=0.00000000,sizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.00000000, M12=1.00000000, M21=-1.00000000, M22=0.00000000,sizingMethod='auto expand');

-moz-transform:  matrix(0.00000000, -1.00000000, 1.00000000, 0.00000000, 0, 0);

-webkit-transform:  matrix(0.00000000, -1.00000000, 1.00000000, 0.00000000, 0, 0);

-o-transform:  matrix(0.00000000, -1.00000000, 1.00000000, 0.00000000, 0, 0);

Text rotation 270 degrees not works in IE8

Your rotation seems to be working in IE8. However the rotated item is positioned incorrectly, so the rotated text is off the edge of the screen when you first view the page. It does show up when you hover and the box moves into view.

This is because IE8's filter style has a different rotation point from the standard CSS. It uses the top-left corner as the rotation point, whereas CSS defaults to the center. You'll need to modify one or other of them so that they use the same point. Then once you've positioned it correctly, it'll look the same in all browsers.

This isn't actually that easy to do -- in IE, you'll need to use a completely different rotation filter with complex matrix maths rather than the relatively easy rotation=3 that you have now -- so my recommendation would be to use a javascript polyfill called CSSSandpaper to make IE8 and earlier recognise the standard CSS rotation - it'll use the filter internally, but all you need is -sand-rotate(-90deg); alongside the other standard CSS variants.

This will make your code much easier to work with, and it'll work consistently across browsers.

To answer your second question -- yes, if you're using filter to do rotations, then it would be a good idea to put the filter styles in an IE<=8 specific block, because they interfere with IE9.

IE9 supports the standard CSS rotation, but also works with the filter, so in IE9 as things stand, you're getting both rotations, which is making it go completely wrong. (you end up with graphical corruption; it's not pretty).

However, if you're using CSS Sandpaper as I suggested above, then this point is irrelevant because it will detect which IE version you're on, and won't run in IE9, so in that case you won't need IE8-specific stylesheets.

Rotate a text 90 degree in IE8 doesnt work

you have to use filter property for supporting IE8. Here is the Demo.

you can change the degree by by defining the integer value (0,1,2,3)

div
{
  width:150px;
  height:150px;
  -ms-transform:rotate(9deg); /* IE 9 */
  -moz-transform:rotate(90deg); /* Firefox */
  -webkit-transform:rotate(90deg); /* Safari and Chrome */
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /*FOR IE8*/
}

Rotate text 270 degrees in IE6 ONLY

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.

Text rotate background issue - IE8 and IE7

Have a look at Raphael http://raphaeljs.com/
I've used this in some projects and have had good experiences.

Rotate text to vertical in IE not working

In order to Rotate in those older browsers, you'll have to use Microsoft's proprietary filters:

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

Replace Value with an integer, 0-4.

0 = 0 degrees
1 = 90 degrees
2 = 180 degrees
3 = 270 degrees
4 = 360 degrees

I do not believe you can do anything other than 90 degree increments, and I believe you may only have one filter per CSS rule. Also, this is of course non-standard and won't validate, if that's an issue.

Rotating 90 degrees in CSS in IE8 and lower

You want to use filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

CSS

.horizontal {
    display: block;
    width: 300px;
    height: 100px;/*height*/
    background: #FF0000;
    margin: auto;
    margin-top: 110px;
    text-align: center;
    border: 5px solid #000000;

    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    transform: rotate(-90deg);
}

More information on this

---

Related Topics