5

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

编辑：最后，我决定接受 Mathias Bynens 的回答。

4

3 回答 3

11

使用 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 属性接受以下四个值之一：0、1、2，或者3分别将元素旋转 0、90、180 或 270 度。虽然它是一个过滤器，所以我不建议使用它。

于 2011-03-23T10:09:02.433 回答
3

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

但是，您必须使用 90° 的倍数。

除此之外，您可以使用 SVG/VML 来旋转文本。例如，看这个页面：http ://raphaeljs.com/text-rotation.html

它使用 RaphaelJS 库进行跨浏览器文本旋转，无需图像。

于 2011-03-23T10:16:18.940 回答
0

Mathias 的回答是正确的，但要支持 IE，您可以使用他们的过滤器：

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

那么IE也将被支持:)

于 2011-03-23T10:14:43.600 回答