想要旋转一个div元素...这可能是DOM的亵渎，但使用canvas元素可能会奏效吗？我不确定 - 如果有人知道如何让它起作用或者为什么它不能起作用，我很想知道。谢谢。
尝试旋转一个 div 元素，这可能被视为 DOM 的亵渎。不过，使用 canvas 元素或许可以解决问题。我不确定。如果有人有任何想法或者知道原因，请告诉我。谢谢。
7个回答
24
要旋转一个DIV，请使用WebkitTransform / -moz-transform: rotate(Xdeg)。
这在IE中不起作用。Raphael库可以与IE一起使用，并且它可以旋转。我相信它使用canvas。
如果您想要动画旋转，可以使用递归的setTimeout()
您甚至可以使用jQuery的.animate()来完成部分旋转。
确保考虑元素的宽度。如果旋转具有比其可见内容更大的宽度的元素，则会出现奇怪的结果。但是，您可以缩小元素的宽度，然后旋转它们。
这是一个简单的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示例
注意：
将度数增加，会使图像顺时针旋转。减少旋转度数将使图像逆时针旋转。
- Peter Ajtai
6
1我们可以同时提及旋转方向（顺时针/逆时针）吗？ - Adil Malik
Raphael.js 使用 SVG 和（在旧版 IE 中）VML，而不是 HTML5 画布。 - user56reinstatemonica8
@PeterAjtai：我知道这是一个旧帖子，但它仍然出现在谷歌搜索的首位，所以我认为在这里提一下仍然相关。当使用脚本设置旋转角度并使用增量角度值时，即：
rotate(++degree)，问题在于您不断地增加度数值。例如：rotate(70531deg)等等。最终我假设会达到最大值。该脚本应该建立一个机制，在度数达到360时重新开始于0。因此它永远不会超过360，只会在0-360之间。 - Nope@PeterAjtai：我在你现有的fiddle上添加了一个非常简单的示例，演示如何重新设置度数值，以便它永远不会过高。请参见这个forked fiddle。如果你现在观察DOM在旋转过程中，你可以看到它每旋转360度就重新设置为0。 - Nope
@Nope：在JavaScript中，最大的整数值约为9千万亿，并且该函数每5毫秒运行一次。因此，您将在140万年内达到最大值。我认为这很好。 - rocketsarefast
@rocketsarefast 这是一种非常“临时抱佛脚”的态度，这在大多数情况下是导致未来出现巨大问题的主要原因（也许在这种特定情况下不是，但总体而言是如此）。虽然我通常不会在需要之前进行预优化，但如果一个小改变可以避免浪费资源，我绝不会提倡浪费。各有所好 :) - Nope
7
我认为你可能会遇到一些困难。通常在主流浏览器使用的3种绘图方法（Canvas、SVG、VML）中，文字支持较差。如果你想旋转一张图片，那就没问题了，但如果你有混合内容包括格式和样式，可能就不行了。
建议尝试使用跨浏览器绘图APIRaphaelJS。
- nickf
7
任何元素的跨浏览器旋转。在IE7和IE8中工作。在IE7中看起来在JSFiddle中无法工作，但在我的项目中也可以在IE7中工作。
http://jsfiddle.net/RgX86/24/
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/
- Pawel
4
当我在IE 10中模拟IE 7或8时，这对我不起作用。 - Curtis
2@curtis 这是因为IE10的默认安全设置。 - user56reinstatemonica8
@curtis IE10不再支持滤镜。仿真模式也不支持滤镜。您必须在真正的IE7和IE8中测试它才能看到它的工作情况。 - Pawel
这种方法有点可行，但使用不靠谱的IE矩阵滤镜会产生一个副作用：旋转后的元素原点与旋转前不同。请参见http://extremelysatisfactorytotalitarianism.com/blog/?p=1002。话虽如此，要在各个浏览器上实现一致的旋转并不是一件简单的任务，除非使用第三方jQuery插件，例如[链接](https://github.com/louisremi/jquery.transform.js/)，我已经验证它在IE8上运行良好。 - JZ_42
1
编辑：已更新至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);
});
编辑：添加了代码以使其成为jQuery函数。
对于那些不想继续阅读的人，这里是代码。要获取更多详细信息和示例，请继续阅读。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);
});
编辑：在本帖的评论中，有人提到了jQuery Multirotation。这个jQuery插件基本上执行了上述功能，并支持IE8。如果您想要最大兼容性或更多选项，可以考虑使用它。但是为了最小开销，我建议使用上述函数。它将适用于IE9+、Chrome、Firefox、Opera和许多其他浏览器。
Bobby...这是给那些真正想在JavaScript中实现它的人。这可能需要在JavaScript回调上进行旋转。
这里有一个jsFiddle。
如果您想要按自定义间隔旋转，可以使用jQuery手动设置CSS而不是添加类。像this！我在答案底部包含了两个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)'});
});
- Dan Grahn
1
这里有两个jQuery补丁可以帮助你（也许在你阅读此文时已经包含在jQuery中了）：
- David Herse
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
filter来解决问题更好，因为它使用相同的旋转原点 - 而filter旋转则是围绕与常规 CSS 不同的点旋转。在这个问题中查看更多信息和实时演示。 - user56reinstatemonica8