jquery文本旋转
我在div中有一个简单的文本，如下所示;
我希望div内的文字旋转20-30度。 我已经在stackoverflow上找到了关于它的这个主题，它在Firefox和Chrome中给出了我想要的结果，但在IE7，IE8和IE9中没有。 我也试过jquery旋转 ，但是当使用它时，看起来插件正在用div本身做一些事情，使它消失，而不是旋转div内的文本。 这有可能与javscript和/或CSS？
注意：Cufon也在使用中。
Codlers回答后更新：
这是Codler回答后的当前应用的css。 适用于FF和Chrome。
-ms-transform: rotate(-20deg); -moz-transform: rotate(-20deg); /*-moz-rotation-point: 0 0;*/ -webkit-transform: rotate(-20deg); /*-webkit-rotation-point: 0 0;*/ -o-transform: rotate(-20deg); /*-ms-writing-mode: tb-lr; * html writing-mode: tb-lr;*/
更新2：IE7和IE8现在正在旋转文本，但在IE9中，我的旋转文本后面有一个大的黑色方块。 是什么导致这个？ CSS现在如下;
-moz-transform: rotate(-20deg); -o-transform: rotate(-20deg); -webkit-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate(-20deg); background-color:transparent; /*-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand')";*/ /*filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand');*/ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand'); zoom: 1; z-index:1; position:absolute; padding : 45px 10px 15px 10px;
最后的工作代码。 对于Jeff和Codler来说，这是对此的肯定。
HTML：
默认CSS：
#banner > div { -moz-transform: rotate(-20deg); /*FF*/ -o-transform: rotate(-20deg); /*Opera*/ -webkit-transform: rotate(-20deg); /*Safari, Chrome*/ -ms-transform: rotate(-20deg) !important; /*IE9*/ transform: rotate(-20deg); /*CSS3 default*/ background-color:transparent; zoom: 1; z-index:1; /*NEEDED FOR IE8*/ width: 191px; position:absolute; padding : 45px 10px 15px 10px; }
CSS for IE 7＆8 – 有条件加载：
#banner { filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand') !important; padding-top:0px; }
在符合标准的浏览器中，您可以使用CSS3属性transform ，但使用供应商前缀可能是个好主意，例如：
-o-transform: rotate(5deg); -khtml-transform: rotate(5deg); -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg);
在Internet Explorer 6和7中，事情变得棘手。 您可以使用IE的filter属性进行旋转。
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
将元素旋转90度。 您还可以使用rotation=2或rotation=3旋转180或270度
你想在IE中将某些东西旋转到不同的角度吗？ 你准备好头疼吗？
你可以再次使用IE的filter属性并指定矩阵坐标，并得到一些非常难看的东西：
progid:DXImageTransform.Microsoft.Matrix(M11=0.99619470, M12=0.08715574, M21=-0.08715574, M22=0.99619470,sizingMethod='auto expand');
有关如何在此页面上使用Matrix坐标的说明 ，但坦率地说，它们都没有任何意义。 更好的解决方案是使用这个方便的矩阵计算器 ，它将在您指定以度为单位的角度时生成所需的CSS。
您可以在我的网站上查看CSS以查看示例，但我有一段时间没有使用IE检查它，所以我无法做出任何承诺……
可以使用css3旋转
transform: rotate(20deg);
请记住，某些浏览器需要供应商前缀
.box_rotate { -moz-transform: rotate(20deg); /* FF3.5+ -o-transform: rotate(20deg); /* Opera 10.5 -webkit-transform: rotate(20deg); /* Saf3.1+, Chrome -ms-transform: rotate(20deg); /* IE9 transform: rotate(20deg); filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 M11=0.9396926207859084, M12=-0.3420201433256687, M21=0.3420201433256687, M22=0.9396926207859084, sizingMethod='auto expand'); zoom: 1; }
来源http://css3please.com/
似乎IE9中背景中的黑色正方形发生在那些令人讨厌的专有filter也在你正在进行css变换的选择器中。
在IE中它实际上是不可能的。 IE充其量只能以90度的倍数旋转，即使这很痛苦（IIRC）。 但是， 这个答案另有说法。
对于现代浏览器，请使用transform ， -webkit-transform和-moz-transform ，如已建议的那样。
您可以在IE中使用VML（矢量标记语言）来躲避它。 我认为它可以做任意轮换。