如何使用jQuery旋转div [英] How to rotate a div using jQuery

问题描述

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

Is it possible to rotate a div using jQuery? I can rotate an image but can't rotate a div; is there any solution for this?

推荐答案

已针对jQuery 1.8更新

Updated for jQuery 1.8

由于jQuery 1.8浏览器特定的转换将自动添加. jsFiddle演示

Since jQuery 1.8 browser specific transformations will be added automatically. 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函数的代码.

---

Added code to make it a jQuery function.

对于那些不想进一步阅读的人，请走.有关更多详细信息和示例，请继续阅读. jsFiddle演示.

For those of you who don't want to read any further, here you go. For more details and examples, read on. 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和其他许多版本上运行.

---

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.

Bobby ...这是供那些实际想要在javascript中进行操作的人使用的.轮流使用JavaScript回调时可能需要使用此代码.

这里是 jsFiddle .

如果您想按自定义间隔旋转，则可以使用jQuery手动设置CSS，而不必添加类.就像这个！我在答案的底部都包含了两个jQuery选项.

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.

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

Make sure these are wrapped in $(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)'});
});

这篇关于如何使用jQuery旋转div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！