问题
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?
回答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);
}
Source
回答2:
Try -ms-transform: rotate(-90deg);
回答3:
Inline elements can't be rotated. you have to display them as block level.
来源：https://stackoverflow.com/questions/11026200/rotating-text-with-css3-html5