Cuando creamos una página web ya sea que esta forme parte de un sistema mayor o no, nos vemos en la necesidad de utilizar JavaScript por muchas razones, validaciones, manejo de datos o hacer que los elementos de la página (como imágenes) sean interactivos; una forma de hacerlos interactivos es rotándolos; en esta entrada veremos como podemos rotar imágenes empleando un plugin de jQuery:

jQuery Rotate

jQuery Rotate es un plugin para jQuery que permite rotar los elementos que conforman nuestra página web sin complicaciones y sin emplear CSS3 en navegadores antiguos (los cuales no tienen soporte) y de esta forma mantener la compatibilidad entre los navegadores web de un versiones menores:

Soporte de los navegadores web más utilizados con jQuery Rotate

• Internet Explorer 6.0 o superior.
• Firefox 2.0 o superior.
• Safari 3 o superior.
• Opera 9 o superior.
• Google Chrome todas sus versiones.

Instalando jQuery Rotate

Primero nos descargamos el plugin desde la página oficial de jQuery Rotate.

Y lo agregamos a nuestra página web mediante:

<script type="text/javascript" src="nuestra-ruta/jQueryRotateCompressed.js">>/script>

Funcionamiento de jQuery Rotate

Para emplear jQuery Rotate basta con realizar una llamada a la función rotate indicando el ángulo en alguna de las siguientes formas:

$("#logoDesarrolloLibre").rotate(80);

o

$("#logoDesarrolloLibre").rotate(({angle:80}));

Más ejemplos de los posibles usos de jQuery Rotate

Animando las rotaciones

Podemos animar las rotaciones:

var rotation = function (){
   $("#logoDesarrolloLibre").rotate({
      angle:0, 
      animateTo:360, 
      callback: rotation
   });
}
rotation();

Animando las rotaciones mediante el setInterval

Podemos animar las rotaciones mediante setInterval para una mejor configuración de la velocidad de la rotación en el tiempo:

var angulo = 0;
setInterval(function(){
      angulo+=3;
     $("#logoDesarrolloLibre").rotate(angulo);
},10);

Animando las rotaciones mediante eventos

Y por supuesto, podemos realizar las animaciones mediante eventos click, mouseover, mouseout, etc:

$("#logoDesarrolloLibre").rotate({ 
   bind: 
     { 
        click: function(){
            $(this).rotate({ angle:0,animateTo:180,easing: $.easing.easeInOutExpo })
        }
     } 
   
});

Entre otras formas que podrás encontrar en la documentación oficial sección ejemplos.