13

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

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

我希望将 div 内的文本旋转 20-30 度。我已经在 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 中，我的旋转文本后面出现了一个黑色的大方块。这可能是什么原因造成的？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;
}
4

5 回答 5

14

在符合标准的浏览器中，您可以使用 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 中的东西旋转到不同的角度吗？你准备好头痛了吗？

您可以再次使用 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 进行检查了，所以我无法做出任何承诺......

于 2011-05-31T08:16:20.420 回答
6

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

于 2011-05-31T08:02:38.440 回答
2

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

于 2012-02-09T16:09:14.447 回答
1

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 answer claims otherwise.

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

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

于 2011-05-31T08:11:10.260 回答
0

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

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

它确实有效。_

于 2011-05-31T08:32:21.710 回答