Rotate a text 90 degree in IE8 doesnt work

Question

I had a text rotated in all browsers except in IE8. I tried to use this method (matrix):

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-2.755455294239536e-16, M12=-1.5, M21=1.5, M22=-2.755455294239536e-16, SizingMethod='auto expand')";

but it didn't work !! can someone help? is there anything new about this issue?

have you used it for rotation `filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);` — Kheema Pandey, Mar 27 '14 at 08:13
I have nothing duplicated.. and no position at all in my span and even heigher and lower in my HTMl arround the span — UI Developer, Mar 27 '14 at 08:17
I tried filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); and also didnt work — UI Developer, Mar 27 '14 at 08:19

score 0 · Answer 1 · answered Mar 27 '14 at 08:04

0

IE8 won't support most of the mordern features. Try if mordernizr js helps..

http://modernizr.com/

answered Mar 27 '14 at 08:04

winnyboy5

1,486
3
22
45

score 0 · Answer 2 · edited May 23 '17 at 12:20

0

You may try some thing like

-ms-transform: rotate(-90deg);

90deg value need to be adjusted as per your requirement

original article as follows http://css-tricks.com/snippets/css/text-rotation/

there is also a hack for older IE version as follows

-sand-transform: rotate(10deg);

more info here CSS3 transform: rotate; in IE9

Hope it helps!

edited May 23 '17 at 12:20

Community

1
1

answered Mar 27 '14 at 08:06

Pravin W

2,451
1
20
26

tried it and doesnt work and by doesnt work I mean It does not rotate – UI Developer Mar 27 '14 at 08:09
`-ms-transform` doesn't work for IE8. you've to use filter for IE8. – Kheema Pandey Mar 27 '14 at 08:13
I tried -sand-transform: rotate(10deg); and didnt work in IE8 – UI Developer Mar 27 '14 at 08:25

score 0 · Accepted Answer · answered Mar 27 '14 at 08:20

0

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*/
}

enter image description here

answered Mar 27 '14 at 08:20

Kheema Pandey

9,977
4
25
26

take the Demo link and try it in IE8 ... it wont work ! – UI Developer Mar 27 '14 at 08:23
I've tested in IE tester tool and it work. let me upload a screenshot here. after that I'll check with `browserstack` . – Kheema Pandey Mar 27 '14 at 08:24
this one works well but 3 instead of 1 filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3); – UI Developer Mar 27 '14 at 08:29
The issue was that I had a non correct width on my span – UI Developer Mar 27 '14 at 08:30
okay! so your problem solved now? if yes then you may vote it – Kheema Pandey Mar 27 '14 at 08:32

Rotate a text 90 degree in IE8 doesnt work

3 Answers3