在jQuery中旋转Div元素
试图旋转一个div元素…这可能是DOM亵渎，它可以工作可能与canvas元素？ 我不确定 – 如果任何人有任何想法可以工作或为什么不这样做，我很想知道。 谢谢。
旋转DIV使用WebkitTransform / -moz-transform: rotate(Xdeg) 。
这在IE中不起作用。 拉斐尔图书馆与IE浏览器工作， 它旋转 。 我相信它使用canvas
如果你想animation旋转，你可以使用recursionsetTimeout()
你甚至可以使用jQuery的.animate()
确保你考虑你的元素的宽度。 如果旋转宽度大于可见内容的宽度，则会得到有趣的结果 。 但是，您可以缩小元素的宽度， 然后旋转它们 。
这里是一个简单的jQuery代码片段，它可以旋转jQuery对象中的元素。 旋转可以开始和停止：
$(function() { var $elie = $(selectorForElementsToRotate); rotate(0); function rotate(degree) { // For webkit browsers: eg Chrome $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'}); // For Mozilla browser: eg Firefox $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'}); // Animate rotation with a recursive call setTimeout(function() { rotate(++degree); },5); } });
jsFiddle的例子
注意：
取得程度并增加它，将顺时针旋转图像。 降低旋转angular度将逆时针旋转图像。
是的，你不会有我想象中的运气。 通常在主要浏览器使用的3种绘图方法（Canvas，SVG，VML）中，我相信文本支持很差。 如果你想旋转一个图像，那就很好，但是如果你有格式和样式的混合内容，可能不是。
查看RaphaelJS的跨浏览器绘图API。
跨浏览器旋转任何元素。 适用于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+')');
编辑13/09/13 15:00包裹在一个不错的，简单的，可链接的，jQuery插件。
使用示例
$.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/
这里有两个jQuery补丁可以帮助您（阅读本文时可能已经包含在jQuery中）：
- 修补jQuery的css（）方法来支持'变换'
- jQuery补丁：animationCSS旋转和缩放
我怀疑你可以使用DOM / CSS旋转元素。 你最好的select是渲染到一个canvas和旋转（不确定的细节）。
我把一个animation旋转代码程序放在一起..你可以在这里得到你的代码…（如果不迟到）
编辑：更新为jQuery 1.8
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); });
编辑：添加代码，使其成为一个jQueryfunction。
对于那些不想进一步阅读的人，在这里，你去。 有关更多详细信息和示例，请继续阅读。 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); });
编辑：这个post上的评论之一提到jQuery Multirotation 。 jQuery的这个插件本质上支持IE8执行上述function。 如果你想要最大的兼容性或更多的select，这可能是值得使用的。 但是为了尽量减less开销，我build议上述function。 它将工作IE9 +，Chrome浏览器，Firefox，Opera等等。
Bobby …这是给那些真正想在javascript中做的人。 这可能是需要在JavaScriptcallback旋转。
这是一个jsFiddle 。
如果你想以自定义间隔旋转，你可以使用jQuery来手动设置CSS而不是添加一个类。 喜欢这个 ！ 我已经在答案的底部包含了两个jQuery选项。
HTML
<div class="rotate"> <h1>Rotatey text</h1> </div>
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的
确保这些包装在$（document）.ready中
$('.rotate').click(function() { $(this).toggleClass('rotated'); });
自定义间隔
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)'}); });
