jquery文本旋转

Question

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

<div id="banner">
    <div>This is an example text</div>
</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:

<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;
}

Answer 1

在符合标准的浏览器中,您可以使用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或旋转180度或270度rotation=3

你想在IE中将某些东西旋转到不同的角度吗？你准备好头疼吗？

你可以filter再次使用IE的属性并指定矩阵坐标,并得到一些非常难看的东西:

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

有关如何在此页面上使用Matrix坐标的说明,但坦率地说,它们都没有任何意义.更好的解决方案是使用这个方便的矩阵计算器,当您指定以度为单位的角度时,它将生成您需要的CSS.

您可以在我的网站上查看CSS 以查看示例,但我有一段时间没有使用IE检查它,所以我不能做出任何承诺......

Answer 2

可以使用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/