使用具有特定度数的jQuery旋转DIV？ [复制]

Posted 2023-05-08

【中文标题】使用具有特定度数的jQuery旋转DIV？ [复制]

【英文标题】：Rotate DIV using jQuery with specific degree? [duplicate]

【发布时间】：2011-07-28 21:20:07

【问题描述】：

可能重复：Rotating a Div Element in jQuery

如何使用 jQuery 将 DIV 和其中的所有元素旋转到一定程度？就像不是只有 90、180 等。我可以将其设置为 88。

【问题讨论】：

也许但我的目的是看你是否可以将 div 旋转到特定的角度。我知道如何将 div 旋转 90 度，但我想要一个不同的数字。

见the Q that this is a duplicate of。答案显示了旋转到任意角度的方法。

【参考方案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 ^docs 属性

【讨论】：

是的，除非每个人都认为这没有提到的是文本在 IE 中旋转时看起来像垃圾。我使用 Arial 字体，当它使用 ms 变换旋转时，它会失去所有抗锯齿功能。

【参考方案2】：

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

祝你好运，

CEC

【参考方案3】：

在 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") 来做的更漂亮。

【讨论】：

tumblr.com/theme/433 转到该链接并查看右上角的徽章。

如果不在 JQuery 中，那我可以用纯 javascript 来做吗？

您不需要 JavaScript 或 jQuery，除非您希望它被动态设置。如果只是静态页面，CSS就足够了。

【参考方案4】：

使用优秀的 jQuery Rotate 插件。 http://code.google.com/p/jqueryrotate/。所有主流浏览器都支持它

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

要旋转图像，您只需$('#myImage').rotate(30) //for a 30 degree rotation 其中#myImage 是您要旋转的元素的ID。

【讨论】：

那个插件不旋转DIV，只旋转IMG