2009-09-22 57 views
0

是否可以使用CSS将文本旋转90°(顺时针或逆时针)并与IE6 +,Firefox 2和Opera兼容?仅使用CSS旋转90°的文本

+0

重复http://stackoverflow.com/questions/1080792/how-to-draw -vertical-text-with-css-cross-browser/ – voyager 2009-09-22 23:25:19

回答

4

How can I draw vertical text with CSS cross-browser?

.rot-neg-90 { 
    /* rotate -90 deg, not sure if a negative number is supported so I used 270 */ 
    -moz-transform: rotate(270deg); 
    -moz-transform-origin: 50% 50%; 
    -webkit-transform: rotate(270deg); 
    -webkit-transform-origin: 50% 50%; 
    -o-transform: rotate(270deg); 
    -o-transform-origin: 50% 50%; 
    transform: rotate(270deg); 
    transform-origin: 50% 50%; 

    /* IE<9 */ 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
} 

IE<9 Rotation property for BasicImage filter.

+0

漂亮的跨浏览器:> = ie6,> = ff2和webkit – 2009-09-23 00:49:06

1

在IE的BasicImage滤波器可以这样做: http://msdn.microsoft.com/en-us/library/ms532972%28VS.85%29.aspx

+0

很确定这与Firefox 2或Opera不兼容 – 2009-09-23 00:06:01

+0

该问题的原始版本仅指定IE6及更高版本。 – lod3n 2009-09-23 00:17:02

+0

@ colin.coghill:它仍然是一个有效的答案,只是不完整的答案。在Firefox和WebKit更容易。歌剧更强硬。 – voyager 2009-09-23 00:58:52