Rotating text with CSS3/HTML5
16,176
Solution 1
-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);
}
Solution 2
Try -ms-transform: rotate(-90deg);
Solution 3
Inline elements can't be rotated. you have to display them as block level.
Author by
Sanjay Sutar
Updated on July 18, 2022Comments
-
Sanjay Sutar almost 2 years
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?
-
Gregg B almost 12 yearsAlso adding the non prefixed version for when the spec is finalized is a good idea.