CSS3文本旋转

Question

如何使用CSS3 text-rotate

实现以下功能

我正在考虑使用2个浮动元素（一个只有文本，另一个用于右面板）和容器..

任何使其在IE8中运行的解决方法也将受到赞赏..

Answer 1

使用

-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);
-o-transform:rotate(-90deg);
transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

元素上的

。 （可能是90，而不是-90 - 你必须检查！）。 IE只需要1,2,3,4的值代表每个90˚旋转。

Answer 2

检查此http://snook.ca/archives/html_and_css/css-text-rotation

像这样写

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

＆安培;对于IE，您可以使用过滤器

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

检查小提琴http://jsfiddle.net/sandeep/w7vZd/12/

＆安培;对于IE8，你可以条件评论或IE css hacks。