使用CSS3 / HTML5旋转文字 [英] Rotating text with CSS3/HTML5

问题描述

我有一个< span> 我想旋转。我使用的是HTML5，CSS3和Internet Explorer 9.

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

我试过下面的CSS，但它不工作：

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

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

如何旋转span？

推荐答案

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

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

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

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

}

来源

这篇关于使用CSS3 / HTML5旋转文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！