jquery文本旋转 [英] jquery text rotation
问题描述
我在div中有一个简单的文本，如下所示：
< div id =banner >
< div>这是一个示例文本< / div>
< / div>
我想将div内的文本旋转20-30度。我已经找到关于它的这个主题，它给了我期望的结果在Firefox和Chrome，但不是在IE7，IE8和IE9。我也尝试过 jquery rotate ，但是当使用这个，它看起来像插件是做一些与div本身，使它消失，而不是旋转div内的文本。这是甚至可能与javscript和/或css？
注意：Cufon也正在使用。
更新后Codlers回答：
这是当前应用css后的答案Codler。适用于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;
最后的工作代码。
< div id =banner>
< div>这是一个示例文字< / 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; / *需要用于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;
}
在符合标准的浏览器中，您可以使用CSS3属性 transform ，但使用供应商前缀可能是个好主意，例如：
-o-transform：rotate（5deg）;
-khtml-transform：rotate（5deg）;
-webkit-transform：rotate（5deg）;
-moz-transform：rotate（5deg）;
在Internet Explorer 6和7中，事情变得棘手。您可以使用IE的过滤器属性进行轮换。
filter：progid ：DXImageTransform.Microsoft.BasicImage（rotation = 1）;
将元素旋转90度。您也可以使用 rotation = 2 或 rotation = 3
旋转180或270度
你想将IE中的某个东西旋转到不同的角度吗？
您可以再次使用IE的过滤器属性，并指定矩阵坐标，真的很丑陋这样：
progid：DXImageTransform.Microsoft.Matrix（M11 = 0.99619470，M12 = 0.08715574，M21 = -0.08715574， M22 = 0.99619470，sizingMethod ='auto expand'）;
有关如何使用此页面，但坦率地说，没有一个有意义。更好的解决方案是使用这个方便的矩阵计算器，它将在您指定时生成所需的CSS
您可以在我的网站上查看CSS a>看到一个例子，但我没有检查它使用IE在一段时间，所以我不能作出任何承诺...
I've got a simple text inside a div, something like the following;
<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 this topic 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?
NOTE: Cufon is also being used.
Update after Codlers answer:
This is the current applied css after the answer of Codler. Works in FF and 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;
-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.
HTML:
<div id="banner">
<div>This is an example text</div>
</div>
Default 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:
#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;
}
In standards-compliant browsers, you can use the CSS3 property transform, though it's probably a good idea to use vendor prefixes, e.g.:
-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 filter property to do rotation.
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
will rotate the element 90 degrees. You can also rotate 180 or 270 degrees using rotation=2 or rotation=3
Do you want to rotate something in IE to a different angle? Are you ready for the headache?
You can use IE's filter property again and specify matrix coordinates, and get something really ugly like this:
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 calculator that will generate the CSS you need when you specify the angle in degrees.
You can check out the CSS on my site to see an example, but I haven't checked it using IE in a while, so I can't make any promises...
这篇关于jquery文本旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
