如何使用jQuery旋轉div div

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等等。

---

鮑比......這是誰真正想要做到這一點在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的

確保這些被包裹在$（文件）。就緒

個

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