¿Cómo Rotar Imágenes u otros elementos HTML con jQuery?

29-07-2014 - Andrés Cruz

¿Cómo Rotar Imágenes u otros elementos HTML con jQuery?

Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos.

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.


Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

Conozca nuestros cursos sobre Laravel, CodeIgniter, Flutter, Electron, Django, Flask y muchos más!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!