使用jQuery以特定角度旋转DIV？

Question

可能重复:
用jQuery旋转DIV元素

我该如何使用jQuery将一个DIV和其内部的所有元素旋转一定角度？例如，不仅限于90、180等度数，可以设置为88度。

- Earl Larson

---

也许吧，但我的问题是想知道如何将一个 div 旋转到特定的角度。我知道如何将 div 旋转 90 度，但我需要一个不同的数字。 - Earl Larson

请参考这个问题的重复。答案展示了旋转到任意角度的方法。 - Brock Adams

Answer 1

以下是现代浏览器使用CSS的代码（通过jQuery应用于您的情况）

$('#divID').css({
     '-moz-transform':'rotate(88deg)',
     '-webkit-transform':'rotate(88deg)',
     '-o-transform':'rotate(88deg)',
     '-ms-transform':'rotate(88deg)',
     'transform':'rotate(88deg)'
});

请查看 transform ^文档 属性。

- Gabriele Petrioli

---

是的，除了每个建议这样做的人都没有提到的是，在IE中旋转的文本看起来很糟糕。我使用Arial字体，当它使用ms transform旋转时，失去了所有的反锯齿效果。 - Andrew Christensen

Answer 2

在HTML中，你不能使用与水平和垂直不同的文本方向。如果嵌入SVG，则可以在其中获得文本旋转。这与jQuery的限制无关，这只是HTML的工作方式。

编辑：哦。很酷。我今天学到了。

那么，就像他们所做的那样：将CSS设置为：

transform: rotate(88deg);
-webkit-transform: rotate(88deg);
-moz-transform: rotate(88deg);

你可以使用以下方法完成这个任务：

$(element).css({ "transform": "rotate(88deg)", "-webkit-transform": "rotate(88deg)", "-moz-transform": "rotate(88deg)" });

或者您可以将其放入一个类中，通过调用$(element).addClass("myObliqueClass")使其更加漂亮。

- Amadan

---

请访问 http://www.tumblr.com/theme/433 并查看右上角的徽章。 - Earl Larson

如果不使用JQuery，那我能否只用纯JavaScript来实现它？ - Earl Larson

除非您希望动态设置页面，否则不需要使用JavaScript或jQuery。如果只是静态页面，CSS就足够了。 - Amadan

Answer 3

使用优秀的jQuery旋转插件。http://code.google.com/p/jqueryrotate/。它被所有主要浏览器支持。

* Internet Explorer 6.0 >
* Firefox 2.0 >
* Safari 3 >
* Opera 9 >
* Google Chrome 

要旋转一张图片，你只需要使用这个语句：$('#myImage').rotate(30) //表示旋转30度 其中 #myImage 是你想要旋转的元素的id。

- Hussein

---

该插件不会旋转 DIV，只能旋转 IMG。 - ZolaKt

Answer 4

我认为你最好的选择是使用CSS，然后使用jquery来切换应用于对象的CSS类，就像你在这里看到的一样：http://answers.oreilly.com/topic/1004-how-to-rotate-an-image-with-css/

祝你好运，

CEC

- Cos Callis