jquery文本旋轉

Question

我在div裏面有一個簡單的文本，如下所示;

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

我想讓div內的文字旋轉20-30度。我已經在它的stackoverflow上找到了this這個主題，它在Firefox和Chrome中給了我想要的結果，但是在IE7，IE8和IE9中卻沒有。我也嘗試過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; 
} 

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'); 

有關於如何使用上this page矩陣座標，但坦率地說他們沒有做出指示任何意義。一個更好的解決方案是使用這個方便的Matrix calculator，當你指定以度爲單位的角度時，將生成你需要的CSS。

您可以檢查出的CSS上my site看到一個例子，但它在同時使用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

這是不是真的有可能在IE中。充其量，IE只能以90度的倍數旋轉，即使這是一種痛苦（IIRC）。但是，this answer另有聲明。

對於現代瀏覽器，請按照建議使用transform,-webkit-transform和-moz-transform。

您可能可以在IE中使用VML（矢量標記語言）來躲避它。我認爲它可以做任意旋轉。

Answer 4

使用該工具生成CSS，將工作的跨瀏覽器：

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

它really確實work。

Answer 5

看起來好像在IE9背景中的黑色方塊發生時，那些討厭的私有過濾器也在你正在做css變換的選擇器中。