Làm thế nào để xoay một div bằng cách sử dụng jQuery

Question

Có thể xoay một div bằng jQuery không? Tôi có thể xoay hình ảnh nhưng không thể xoay một div; Có giải pháp nào cho điều này?

Answer 1

CHỈNH SỬA: Đã cập nhật cho jQuery 1.8

Vì các biến đổi cụ thể của trình duyệt jQuery 1.8 sẽ được thêm tự động. 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); 
}); 

---

EDIT: Nhập mã để làm cho nó một chức năng jQuery.

Đối với những người bạn không muốn đọc thêm nữa, thông tin cho bạn đây. Để biết thêm chi tiết và ví dụ, hãy đọc tiếp. 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); 
}); 

---

EDIT: Một trong những ý kiến ​​về bài đăng này đề cập jQuery Multirotation. Plugin này cho jQuery về cơ bản thực hiện chức năng trên với sự hỗ trợ cho IE8. Nó có thể có giá trị sử dụng nếu bạn muốn tương thích tối đa hoặc nhiều tùy chọn hơn. Nhưng đối với chi phí tối thiểu, tôi đề nghị các chức năng trên. Nó sẽ làm việc IE9 +, Chrome, Firefox, Opera và nhiều thứ khác.

---

Bobby ... Điều này là dành cho những người thực sự muốn làm điều đó trong javascript. Điều này có thể được yêu cầu để quay trên một cuộc gọi lại javascript.

Đây là jsFiddle.

Nếu bạn muốn xoay theo khoảng thời gian tùy chỉnh, bạn có thể sử dụng jQuery để đặt thủ công css thay vì thêm lớp học. Giống như this! Tôi đã bao gồm cả hai tùy chọn jQuery ở dưới cùng của câu trả lời.

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

Hãy chắc chắn rằng chúng được bọc trong $ (document) .ready

$('.rotate').click(function() { 
    $(this).toggleClass('rotated'); 
}); 

khoảng

Tuỳ chỉnh

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