Cómo rotar un div usando jQuery

Question

¿Es posible rotar un div usando jQuery? Puedo rotar una imagen pero no puedo rotar un div; ¿Hay alguna solución para esto?

Answer 1

EDIT: Actualización para jQuery 1.8

Desde jQuery 1.8 del navegador transformaciones específicas se añadirá automáticamente. 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: Añadido código para que sea una función de jQuery.

Para aquellos de ustedes que no quieran seguir leyendo, aquí tienen. Para más detalles y ejemplos, sigue leyendo. 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: Uno de los comentarios de esta entrada mencionado jQuery Multirotation. Este complemento para jQuery esencialmente realiza la función anterior con soporte para IE8. Puede valer la pena usarlo si quiere la máxima compatibilidad o más opciones. Pero para una sobrecarga mínima, sugiero la función anterior. Funcionará IE9 +, Chrome, Firefox, Opera y muchos otros.

---

Bobby ... Esto es para las personas que realmente quieren hacerlo en el javascript. Esto puede ser necesario para girar en una devolución de llamada javascript.

Aquí hay un jsFiddle.

Si desea rotar a intervalos personalizados, puede usar jQuery para configurar manualmente el CSS en lugar de agregar una clase. Me gusta this! He incluido ambas opciones jQuery en la parte inferior de la respuesta.

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

asegurarse de que estos son envueltos en $ (document) .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)'}); 
});