jquery - 如何使用 jQuery 旋转 div

Question

已关闭。此问题不符合 Stack Overflow guidelines 。目前不接受答案。

---

问题必须表现出对所解决问题的最低限度的理解。告诉我们您尝试过做什么，为什么不起作用，以及它应该如何工作。另请参阅:Stack Overflow question checklist

已关闭10 年前。

Improve this question

是否可以使用 jQuery 旋转 div？我可以旋转图像，但不能旋转 div；有什么解决办法吗？

Answer 1

编辑:针对 jQuery 1.8 进行了更新

自 jQuery 1.8 起，将自动添加浏览器特定的转换。 jsFiddle Demo

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 Demo .

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)'});
});