如何使用 jQuery 旋转 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3020904/
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
How to rotate a div using jQuery
提问by DEVOPS
Is it possible to rotate a div using jQuery? I can rotate an image but can't rotate a div; is there any solution for this?
是否可以使用 jQuery 旋转 div？我可以旋转图像但不能旋转 div；有什么解决办法吗？
回答by Dan Grahn
EDIT: Updated for jQuery 1.8
编辑：针对 jQuery 1.8 更新
Since jQuery 1.8 browser specific transformations will be added automatically. jsFiddle Demo
由于 jQuery 1.8 浏览器特定的转换将自动添加。jsFiddle 演示
var rotation = 0;
jQuery.fn.rotate = function(degrees) {
$(this).css({'transform' : 'rotate('+ degrees +'deg)'});
return $(this);
};
$('.rotate').click(function() {
rotation += 5;
$(this).rotate(rotation);
});
EDIT: Added code to make it a jQuery function.
编辑：添加了代码以使其成为 jQuery 函数。
For those of you who don't want to read any further, here you go. For more details and examples, read on. jsFiddle Demo.
对于那些不想进一步阅读的人，请看这里。有关更多详细信息和示例，请继续阅读。jsFiddle 演示。
var rotation = 0;
jQuery.fn.rotate = function(degrees) {
$(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
'-moz-transform' : 'rotate('+ degrees +'deg)',
'-ms-transform' : 'rotate('+ degrees +'deg)',
'transform' : 'rotate('+ degrees +'deg)'});
return $(this);
};
$('.rotate').click(function() {
rotation += 5;
$(this).rotate(rotation);
});
EDIT: One of the comments on this post mentioned jQuery Multirotation. This plugin for jQuery essentially performs the above function with support for IE8. It may be worth using if you want maximum compatibility or more options. But for minimal overhead, I suggest the above function. It will work IE9+, Chrome, Firefox, Opera, and many others.
编辑：这篇文章的评论之一提到了jQuery Multirotation。这个 jQuery 插件基本上执行上述功能并支持 IE8。如果您想要最大的兼容性或更多选项，可能值得使用。但是为了最小的开销，我建议使用上述功能。它将在 IE9+、Chrome、Firefox、Opera 和许多其他平台上运行。
Bobby... This is for the people who actually want to do it in the javascript. This may be required for rotating on a javascript callback.
鲍比...这是为那些真正想要在 javascript 中做这件事的人准备的。这可能是在 javascript 回调上旋转所必需的。
Here is a jsFiddle.
这是一个jsFiddle。
If you would like to rotate at custom intervals, you can use jQuery to manually set the css instead of adding a class. Like this! I have included both jQuery options at the bottom of the answer.
如果您想以自定义间隔旋转，您可以使用 jQuery 手动设置 css 而不是添加类。像这样！我在答案的底部包含了两个 jQuery 选项。
HTML
HTML
<div class="rotate">
<h1>Rotatey text</h1>
</div>
CSS
CSS
/* Totally for style */
.rotate {
background: #F02311;
color: #FFF;
width: 200px;
height: 200px;
text-align: center;
font: normal 1em Arial;
position: relative;
top: 50px;
left: 50px;
}
/* The real code */
.rotated {
-webkit-transform: rotate(45deg); /* Chrome, Safari 3.1+ */
-moz-transform: rotate(45deg); /* Firefox 3.5-15 */
-ms-transform: rotate(45deg); /* IE 9 */
-o-transform: rotate(45deg); /* Opera 10.50-12.00 */
transform: rotate(45deg); /* Firefox 16+, IE 10+, Opera 12.10+ */
}
jQuery
jQuery
Make sure these are wrapped in $(document).ready
确保这些都包含在 $(document).ready 中
$('.rotate').click(function() {
$(this).toggleClass('rotated');
});
Custom intervals
自定义间隔
var rotation = 0;
$('.rotate').click(function() {
rotation += 5;
$(this).css({'-webkit-transform' : 'rotate('+ rotation +'deg)',
'-moz-transform' : 'rotate('+ rotation +'deg)',
'-ms-transform' : 'rotate('+ rotation +'deg)',
'transform' : 'rotate('+ rotation +'deg)'});
});
