Como girar uma div usando jQuery

É possível girar uma div usando jQuery? Posso rodar uma imagem mas não posso rodar uma div; Existe alguma solução para isso?

EDIT: atualizado para jQuery 1,8

Já que as transformações específicas do navegador do jQuery 1.8 serão adicionadas automaticamente. Demonstração jsfiddle

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: Adicionado código para torná-lo uma function jQuery.

Para aqueles de vocês que não querem ler mais nada, aqui vai você. Para mais detalhes e exemplos, continue lendo. 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: Um dos comentários sobre este post mencionou jQuery Multirotation . Este plugin para jQuery essencialmente executa a function acima com suporte para o IE8. Pode valer a pena usar se você quiser compatibilidade máxima ou mais opções. Mas para sobrecarga mínima, sugiro a function acima. Ele funcionará com o IE9 +, Chrome, Firefox, Opera e muitos outros.


Bobby … Isto é para as pessoas que realmente querem fazer isso no javascript. Isso pode ser necessário para girar em um retorno de chamada de javascript.

Aqui está um jsFiddle .

Se você gostaria de rodar em intervalos personalizados, você pode usar o jQuery para definir manualmente o css em vez de adicionar uma class. Assim! Eu incluí as duas opções do jQuery na parte inferior da resposta.

HTML

 

Rotatey text

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

Certifique-se de que eles estejam agrupados em $ (documento) .ready

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

Intervalos personalizados

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