使用CSS3/HTML5旋转文本

Question

我有一个要旋转的 <span> 元素。我正在使用HTML5，CSS3和Internet Explorer 9。

我尝试了以下CSS代码，但不起作用：

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

我该如何旋转这个元素？

- Sanjay Sutar

Answer 1

-webkit-和-moz-属性分别用于Webkit浏览器（Chrome，Safari）和Gecko浏览器（Firefox）。

您还需要使用IE的等效选项。

.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);

}

来源

- Ayush

---

同时添加非前缀版本以便在规范确定后的时候使用是个好主意。 - Gregg B

Answer 2

尝试使用 -ms-transform: rotate(-90deg); 来进行旋转。

- Sebr

Answer 3

内联元素无法旋转。您需要将它们显示为块级元素。

- owais