Javascript 使用具有特定程度的 jQuery 旋转 DIV?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5534039/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 17:42:01  来源:igfitidea点击:

Rotate DIV using jQuery with specific degree?

javascriptjquerycss

提问by Earl Larson

Possible Duplicate:
Rotating a Div Element in jQuery

可能的重复:
在 jQuery 中旋转 Div 元素

How would I rotate a DIV and all the elements inside to a certain degree using jQuery? Like instead of just 90, 180, etc.. I would be able to set it at say 88.

如何使用 jQuery 在一定程度上旋转 DIV 和所有元素?就像而不是仅仅 90、180 等。我可以将它设置为 88。

回答by Gabriele Petrioli

Here is the code for the modern browsers with CSS (applied through jquery for your case)

这是带有 CSS 的现代浏览器的代码(通过 jquery 应用到您的情况

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

Have a look at the transformdocsproperty

看看transformdocs属性

回答by Amadan

In HTML, you can't - text orientations different than horisontal and vertical are not supported. If you embed SVG, you can get text rotation there. It has nothing to do with jQuery limitations, it's just how HTML works.

在 HTML 中,您不能 - 不支持不同于水平和垂直的文本方向。如果您嵌入 SVG,您可以在那里获得文本旋转。它与 jQuery 限制无关,它只是 HTML 的工作方式。

EDIT: Huh. Cool. TIL.

编辑:嗯。凉爽的。直到。

Okay then, just do what they do: set CSS to:

好的,那就做他们所做的:将 CSS 设置为:

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

You can do it with

你可以用

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

or do it more prettily by stuffing that into a class and invoking $(element).addClass("myObliqueClass").

或者通过将其填充到一个类中并调用$(element).addClass("myObliqueClass").

回答by Cos Callis

I think your best shot at this is to use CSS and then use jquery to switch out the css class that is being applied to the object like you can see here : http://answers.oreilly.com/topic/1004-how-to-rotate-an-image-with-css/

我认为你最好的办法是使用 CSS,然后使用 jquery 来切换应用到对象的 css 类,就像你在这里看到的:http: //answers.oreilly.com/topic/1004-how-使用 CSS 旋转图像/

Good luck,

祝你好运,

CEC

中电

回答by Hussein

Use the excellent jQuery Rotate plugin. http://code.google.com/p/jqueryrotate/. It is supported by all major browsers

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

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

To rotate an image, All you need to do is $('#myImage').rotate(30) //for a 30 degree rotationWhere #myImageis the id of the element you want rotated.

要旋转图像,您需要做的就是您要旋转的元素的 id$('#myImage').rotate(30) //for a 30 degree rotation在哪里#myImage