jQuery文本旋转

Question

jQuery文本旋转

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内的文本。使用javascript和/或css是否可能实现此功能？

注意：Cufon也正在使用。

Codler的回答后更新：

以下是应用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;
}

- Rob

试试这个教程。我认为这会很有帮助... :)https://dev59.com/xm025IYBdhLWcg3wKCb- - Steven.Nguyen

5个回答

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

Source http://css3please.com/

- Codler

这不是我在我的问题中已经提到的话题之一吗？ - Rob

1

使用 -ms-transform 适用于 IE9，而对于 IE6-IE8，请使用 "filter matrix"。您可以在此处找到更多信息：http://css3please.com/ - Codler

@Codler，问题已解决。问题已更新并附上了可工作的示例。感谢您的所有帮助。 - Rob

2

似乎在IE9中，当你在进行CSS变换时，如果选择器中有那些令人讨厌的专有过滤器，就会出现背景中的黑色方块。

- dontmentionthebackup

这真的帮了我很多，谢谢！将筛选器添加到lt IE9样式表中解决了我的问题。 - Nicolas Borda

1

在IE中这是不太可能的。最多，IE只能以90度的倍数旋转，而且即使如此也很麻烦（如果我没记错的话）。然而，this answer声称可以。

对于现代浏览器，建议使用transform、-webkit-transform和-moz-transform。

你可能可以在IE中使用VML（矢量标记语言）来实现任意旋转。我认为它可以做到。

- Eric

0

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

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

它真的起作用了。

- thirtydot

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jeff · Accepted Answer

在符合标准的浏览器中，您可以使用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);

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

有关如何使用矩阵坐标的说明可以在这个页面上找到，但实话说，它们中没有一个让人感觉有意义。更好的解决方案是使用这个方便的矩阵计算器，当您指定角度时，它将生成所需的CSS。

您可以在我的网站上查看CSS的示例，但我有一段时间没有在IE中检查过了，所以不能保证...