Javascript jquery 文本旋转

jquery text rotation

提问by Rob

I've got a simple text inside a div, something like the following;

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

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

I want the text inside the div to be rotated 20-30 degrees. I've already found thistopic on stackoverflow about it and it gives me the desired result in Firefox and Chrome but not in IE7, IE8 and IE9. I also tried jquery rotate, but when using this it looks like the plugin is doing something with the div itself, making it disappear, instead of rotating the text inside the div. Is this even possible with javscript and/or css?

我希望 div 内的文本旋转 20-30 度。我已经在 stackoverflow 上找到了这个话题，它在 Firefox 和 Chrome 中给了我想要的结果，但在 IE7、IE8 和 IE9 中却没有。我也尝试过jquery rotate，但是当使用它时，看起来插件正在对 div 本身做一些事情，使其消失，而不是旋转 div 内的文本。这甚至可以使用 javscript 和/或 css 吗？

NOTE: Cufon is also being used.

注意：也正在使用 Cufon。

Update after Codlers answer:

编码器回答后更新：

This is the current applied css after the answer of Codler. Works in FF and Chrome.

这是在 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;*/

UPDATE 2: IE7 and IE8 are rotating the text now, but in IE9 i'm getting a big black square behind my rotated text. What can be causing this? CSS is now as below;

更新 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;

The Final working piece of code. Credits for this go toe Jeff and Codler.

最终的工作代码。这要归功于 Jeff 和 Codler。

HTML:

HTML：

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

Default CSS:

默认 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 - Loaded conditionally:

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

回答by Jeff

In standards-compliant browsers, you can use the CSS3 property transform, though it's probably a good idea to use vendor prefixes, e.g.:

在符合标准的浏览器中，您可以使用 CSS3 属性transform，但使用供应商前缀可能是个好主意，例如：

-o-transform: rotate(5deg);
-khtml-transform: rotate(5deg);
-webkit-transform: rotate(5deg); 
-moz-transform: rotate(5deg);

In Internet Explorer 6 and 7, things get tricky. You can use IE's filterproperty to do rotation.

在 Internet Explorer 6 和 7 中，事情变得棘手。您可以使用 IE 的filter属性进行旋转。

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

will rotate the element 90 degrees. You can also rotate 180 or 270 degrees using rotation=2or rotation=3

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

Do you want to rotate something in IE to a different angle? Are you ready for the headache?

你想把 IE 中的东西旋转到不同的角度吗？你准备好头痛了吗？

You can use IE's filterproperty again and specify matrix coordinates, and get something really ugly like this:

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

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

There are instructions on how to use the Matrix coordinates on this page, but frankly none of them make any sense. A better solution is to use this handy Matrix calculatorthat will generate the CSS you need when you specify the angle in degrees.

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

You can check out the CSS on my siteto see an example, but I haven't checked it using IE in a while, so I can't make any promises...

您可以查看我网站上的 CSS以查看示例，但我已经有一段时间没有使用 IE 进行检查了，所以我无法做出任何承诺...

回答by Codler

It is possible to rotate with css3

可以用css3旋转

transform: rotate(20deg);

Remember that some browser require vendor prefix.

请记住，某些浏览器需要供应商前缀。

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

Source http://css3please.com/

来源http://css3please.com/

回答by dontmentionthebackup

It seems as if the black square in the background in IE9 happens when those nasty proprietary filters are also in the selector where you are doing css transforms.

当那些讨厌的专有过滤器也在您进行 css 转换的选择器中时，IE9 背景中的黑色方块似乎就会发生。

回答by Eric

It's not really possible in IE. At best, IE can only rotate in multiples of 90 degrees, and even that's a pain (IIRC). However, this answerclaims otherwise.

这在 IE 中是不可能的。充其量，IE 只能以 90 度的倍数旋转，即使这样也很痛苦（IIRC）。然而，这个答案另有说法。

For modern browsers, use the transform, -webkit-transform, and -moz-transform, as suggested already.

对于现代的浏览器，使用transform，-webkit-transform和-moz-transform作为已经建议。

You might be able to bodge it using VML (Vector Markup Language) in IE. I think it can do arbitrary rotations.

您可以在 IE 中使用 VML（矢量标记语言）来解决它。我认为它可以进行任意旋转。

回答by thirtydot

Use this tool to generate CSS that will work cross browser:

使用此工具生成可跨浏览器工作的 CSS：

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

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

It reallydoes work.

它真的做的工作。