如何使用 jQuery 旋转 div [关闭]

Posted 2023-05-08

【中文标题】如何使用 jQuery 旋转 div [关闭]

【英文标题】：How to rotate a div using jQuery [closed]

【发布时间】：2011-03-02 13:03:38

【问题描述】：

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

【问题讨论】：

Rotating a Div Element in jQuery 的可能重复项

@Sjoerd：请阅读常见问题解答：meta.stackexchange.com/questions/8724/…

我不明白结束问题的那些规则。人们正试图为他们的问题找到解决方案（不仅仅是提出问题的人）。我找到了这个，我知道有更好的解决方案，所以我一直在寻找。但是我不能回来在这里给出更好的答案，因为“他没有努力去寻找自己的解决方案”。这个网站的目的不是在尽可能短的时间内为 ppl 提供答案吗？当他不尝试自己“欺骗”自己时 - 他不会成为优秀的程序员，但这是他的战斗不是我们或你的。

@user1096901，不，这是一个问答网站，而不仅仅是一个 A 网站。问题措辞得当很重要。为了让人们提出可以回答的正确问题，我们付出了很多努力。您可以在help center 中找到更多信息。

现在是 2021 年，我用谷歌搜索了这个。这就是我一直在寻找的答案。

【参考方案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);
);

---

编辑：这篇文章中的一位 cmets 提到了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)');
);

【讨论】：

轮换更好？ css 或 jquery，plugins.jquery.com/multirotation。谢谢。

在有关此插件的答案中添加了信息。查看插件的源代码。它支持 IE8 和更多功能，但除此之外，它的功能与此完全相同。

简单而完美。感谢您将其设为 jQuery 函数。您可以将定义 jQuery.fn.rotate 替换为 $.fn.rotate - 做同样的事情但更简洁。

自 jQuey 1.8 起不再需要浏览器前缀，另见：***.com/a/17487728/2049986。

@JacobvanLingen 谢谢！我已经更新了答案。