使用CSS3 / HTML5旋转文本

时间:2012-06-14 03:19:00

标签: css html5 css3 css-transitions

我想要转动<span>。我使用的是HTML5,CSS3和Internet Explorer 9。

我尝试了下面的CSS,但它不起作用:

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

如何旋转范围?

3 个答案:

答案 0 :(得分:16)

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

}

Source

答案 1 :(得分:4)

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

答案 2 :(得分:2)

内联元素无法旋转。你必须将它们显示为块级别。