jquery 文本旋转

我在 div 中有一个简单的文本，如下所示；

<div id="banner">
    <div>This is an example text</div>
</div>

我希望 div 内的文本旋转 20-30 度。我已经找到了this https://stackoverflow.com/questions/4895422/rotate-text-with-css-javascript-jquerystackoverflow 上关于它的主题，它在 Firefox 和 Chrome 中给了我想要的结果，但在 IE7、IE8 和 IE9 中却没有。我也尝试过jquery 旋转 http://code.google.com/p/jquery-rotate/，但是当使用这个插件时，看起来插件正在对 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;

最终的工作代码。这一举动归功于杰夫和科德勒。

HTML:

<div id="banner">
    <div>This is an example text</div>
</div>

默认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 中，事情变得很棘手。你可以使用IEfilter属性进行轮换。

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

会将元素旋转 90 度。您还可以使用以下命令旋转 180 或 270 度rotation=2 or rotation=3

您想将 IE 中的某些内容旋转到不同的角度吗？你准备好迎接头痛了吗？

你可以使用IEfilter再次属性并指定矩阵坐标，并得到像这样的非常丑陋的东西：

progid:DXImageTransform.Microsoft.Matrix(M11=0.99619470, M12=0.08715574, M21=-0.08715574, M22=0.99619470,sizingMethod='auto expand');

有关于如何使用矩阵坐标的说明这一页 http://msdn.microsoft.com/en-us/library/ms533014%28VS.85%29.aspx，但坦率地说，它们都没有任何意义。更好的解决方案是使用这个方便的矩阵计算器 http://www.boogdesign.com/examples/transforms/matrix-calculator.html当您指定角度（以度为单位）时，它将生成您需要的 CSS。

你可以查看 CSSmy site http://chil.rice.edu/jzemla/看一个例子，但我有一段时间没有使用 IE 检查它，所以我不能做出任何承诺......