javascript - jquery 文本旋转

Question

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

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

我希望 div 中的文本旋转 20-30 度。我已经找到了 this关于它的 stackoverflow 主题，它在 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 中我在旋转的文本后面得到一个大的黑色方 block 。是什么原因造成的？ 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;
}

IE 7 和 8 的 CSS - 有条件地加载:

#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，但使用 vendor 前缀可能是个好主意，例如:

-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 中将某些内容旋转到不同的 Angular 吗？准备好迎接头痛了吗？

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

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

this page 上有关于如何使用 Matrix 坐标的说明。 ，但坦率地说，它们都没有任何意义。更好的解决方案是使用这个方便的 Matrix calculator当您以度数指定 Angular 时，它将生成您需要的 CSS。

您可以在 my site 上查看 CSS看一个例子，但我有一段时间没有使用 IE 检查它，所以我不能做出任何 promise ......