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或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檢查它，所以我不能做出任何承諾......

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/

Answer 3

似乎IE9中背景中的黑色正方形發生在那些令人討厭的專有過濾器也在你正在進行css變換的選擇器中。

Answer 4

在IE中它實際上是不可能的。 IE充其量只能以90度的倍數旋轉，即使這很痛苦（IIRC）。 但是， 這個答案另有說法。

對於現代瀏覽器，請使用transform ， -webkit-transform和-moz-transform ，如已建議的那樣。

您可以在IE中使用VML（矢量標記語言）來躲避它。 我認為它可以做任意輪換。

Answer 5

使用此工具生成可跨瀏覽器工作的CSS：

http://www.useragentman.com/IETransformsTranslator/index.html

它確實 有效 。