是否可以在网页中以一定角度显示文本?

时间:2011-03-23 10:07:36

标签: html css text angle

我想知道是否有可能以某个角度在网页中创建文本,例如40度。如果有可能,我该怎么做?

编辑:最后,我决定选择Mathias Bynens的答案。

3 个答案:

答案 0 :(得分:10)

使用CSS3转换:

.selector {
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  -o-transform: rotate(40deg);
  transform: rotate(40deg);
}

IE确实支持filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);,其中rotation属性接受以下四个值中的一个:0123这些将旋转元素分别为0度,90度,180度或270度。这是一个过滤器,所以我不建议使用它。

答案 1 :(得分:3)

要添加到Mathias的答案,您也可以在IE中旋转文字:http://snook.ca/archives/html_and_css/css-text-rotation

但是,您必须达到90°的倍数。

除此之外,您可以将SVG / VML用于旋转文本。例如,请查看此页面:http://raphaeljs.com/text-rotation.html

它使用RaphaelJS库进行跨浏览器文本轮换而没有图像。

答案 2 :(得分:0)

Mathias的答案是正确的,但为了支持IE,你可以使用他们的过滤器:

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
/*play with the number to get it right*/

然后IE也会得到支持:)