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
Rotate DIV using jQuery with specific degree?
提问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 transform
docsproperty
看看transform
docs属性
回答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 rotation
Where #myImage
is the id of the element you want rotated.
要旋转图像,您需要做的就是您要旋转的元素的 id$('#myImage').rotate(30) //for a 30 degree rotation
在哪里#myImage
。