7

I have a <span> that I want to rotate. I am using HTML5, CSS3, and Internet Explorer 9.

I tried the below CSS, but it's not working:

-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg);

How do I rotate the span?

DBUK
  • 1,373
  • 1
  • 23
  • 41
Sanjay Sutar
  • 544
  • 1
  • 5
  • 18

3 Answers3

17

-webkit- and -moz- properties are for webkit browsers (Chrome, Safari) and Gecko browsers (Firefox) respectively.

You need to use the equivalent for IE as well.

.rotate {

/* Safari, Chrome */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* IE */
-ms-transform: rotate(-90deg);

/* Opera */
-o-transform: rotate(-90deg);

/* Older versions of IE */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

/* CSS3 standard as defined here: http://www.w3.org/TR/css3-transforms/ */
transform: rotate(-90deg);

}

Source

Ayush
  • 41,754
  • 51
  • 164
  • 239
4

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

Sebr
  • 110
  • 4
2

Inline elements can't be rotated. you have to display them as block level.

owais
  • 4,752
  • 5
  • 31
  • 41