在 jQuery 中旋转 Div 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/382591/
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
Rotating a Div Element in jQuery
提问by user43889
Trying to rotate a div element...This might be DOM blasphemy, could it work possibly with a canvas element? I'm not sure - if anybody has any ideas of how this could work or why it doesn't, I'd love to know. Thanks.
试图旋转一个 div 元素......这可能是对 DOM 的亵渎，它可能与画布元素一起工作吗？我不确定 - 如果有人对这如何工作或为什么不工作有任何想法，我很想知道。谢谢。
回答by Peter Ajtai
To rotate a DIV Make use of WebkitTransform / -moz-transform: rotate(Xdeg).
旋转 DIV 使用WebkitTransform / -moz-transform: rotate(Xdeg).
This will not work in IE. The Raphael library does work with IE and it does rotation. I believe it uses canvases
这在 IE 中不起作用。Raphael 库可以与 IE 一起使用，并且可以进行旋转。我相信它使用canvases
If you want to animate the rotation, you can use a recursive setTimeout()
如果要为旋转设置动画，可以使用递归 setTimeout()
You could probably even do part of a spin with jQuery's .animate()
你甚至可以用 jQuery 做一部分 .animate()
Make sure that you consider the width of your element. If rotate an that has a larger width than its visible content, you'll get funny results. However you can narrow the widths of elements, and then rotate them.
确保考虑元素的宽度。如果旋转宽度大于其可见内容的宽度，您会得到有趣的结果。但是，您可以缩小元素的宽度，然后旋转它们。
Here is a simply jQuery snippet that rotates the elements in a jQuery object. Rotatation can be started and stopped:
这是一个简单的 jQuery 片段，用于旋转 jQuery 对象中的元素。可以开始和停止旋转：
$(function() {
var $elie = $(selectorForElementsToRotate);
rotate(0);
function rotate(degree) {
// For webkit browsers: e.g. Chrome
$elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
// For Mozilla browser: e.g. Firefox
$elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});
// Animate rotation with a recursive call
setTimeout(function() { rotate(++degree); },5);
}
});
jsFiddle example
jsFiddle 示例
Note:
Taking the degree and increasing it, will rotate the image clockwise. Decreasing the degree of rotation will rotate the image counter clockwise.
注意：
取度数并增加它，将顺时针旋转图像。降低旋转度将图像旋转该逆时针。
回答by Pawel
Cross-browser rotate for any element. Works in IE7 and IE8. In IE7 it looks like not working in JSFiddle but in my project worked also in IE7
跨浏览器旋转任何元素。适用于 IE7 和 IE8。在 IE7 中它看起来不能在 JSFiddle 中工作，但在我的项目中也在 IE7 中工作
var elementToRotate = $('#rotateMe');
var degreeOfRotation = 33;
var deg = degreeOfRotation;
var deg2radians = Math.PI * 2 / 360;
var rad = deg * deg2radians ;
var costheta = Math.cos(rad);
var sintheta = Math.sin(rad);
var m11 = costheta;
var m12 = -sintheta;
var m21 = sintheta;
var m22 = costheta;
var matrixValues = 'M11=' + m11 + ', M12='+ m12 +', M21='+ m21 +', M22='+ m22;
elementToRotate.css('-webkit-transform','rotate('+deg+'deg)')
.css('-moz-transform','rotate('+deg+'deg)')
.css('-ms-transform','rotate('+deg+'deg)')
.css('transform','rotate('+deg+'deg)')
.css('filter', 'progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\','+matrixValues+')')
.css('-ms-filter', 'progid:DXImageTransform.Microsoft.Matrix(SizingMethod=\'auto expand\','+matrixValues+')');
Edit 13/09/13 15:00 Wrapped in a nice and easy, chainable, jquery plugin.
编辑 13/09/13 15:00 包裹在一个漂亮、简单、可链接的 jquery 插件中。
Example of use
使用示例
$.fn.rotateElement = function(angle) {
var elementToRotate = this,
deg = angle,
deg2radians = Math.PI * 2 / 360,
rad = deg * deg2radians ,
costheta = Math.cos(rad),
sintheta = Math.sin(rad),
m11 = costheta,
m12 = -sintheta,
m21 = sintheta,
m22 = costheta,
matrixValues = 'M11=' + m11 + ', M12='+ m12 +', M21='+ m21 +', M22='+ m22;
elementToRotate.css('-webkit-transform','rotate('+deg+'deg)')
.css('-moz-transform','rotate('+deg+'deg)')
.css('-ms-transform','rotate('+deg+'deg)')
.css('transform','rotate('+deg+'deg)')
.css('filter', 'progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\','+matrixValues+')')
.css('-ms-filter', 'progid:DXImageTransform.Microsoft.Matrix(SizingMethod=\'auto expand\','+matrixValues+')');
return elementToRotate;
}
$element.rotateElement(15);
JSFiddle: http://jsfiddle.net/RgX86/175/
JSFiddle：http: //jsfiddle.net/RgX86/175/
回答by nickf
yeah you're not going to have much luck i think. Typically across the 3 drawing methods the major browsers use (Canvas, SVG, VML), text support is poor, I believe. If you want to rotate an image, then it's all good, but if you've got mixed content with formatting and styles, probably not.
是的，我认为你不会有太多运气。我相信，通常在主要浏览器使用的 3 种绘图方法（Canvas、SVG、VML）中，文本支持很差。如果您想旋转图像，那么一切都很好，但是如果您的内容与格式和样式混合在一起，则可能不会。
Check out RaphaelJSfor a cross-browser drawing API.
查看RaphaelJS以获得跨浏览器绘图 API。
回答by David Herse
Here are two jQuery patches to help out (maybe already included in jQuery by the time you are reading this):
这里有两个 jQuery 补丁可以提供帮助（在您阅读本文时可能已经包含在 jQuery 中）：
回答by strager
I doubt you can rotate an element using DOM/CSS. Your best bet would be to render to a canvas and rotate that (not sure on the specifics).
我怀疑您是否可以使用 DOM/CSS 旋转元素。您最好的选择是渲染到画布并旋转它（不确定具体细节）。
回答by Dan Grahn
EDIT: Updated for jQuery 1.8
编辑：针对 jQuery 1.8 更新
jQuery 1.8 will add browser specific transformations. 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)'});
});
回答by Yuan Shen
I put together an animated rotate code program.. you can get your code here ... (if not to late)
我整理了一个动画旋转代码程序..你可以在这里得到你的代码......（如果不是太晚的话）
