ARTICULO: rotar imagenes

rogeliolt · #1 (**permalink**) 24/07/2015, 10:11

Que tal Amigos.

Últimamente me he topado con varios problemas con imágenes, fondos, estilos, scripts, entre otros muchas otras cosas que un programador WEB experimentado, conoce de pies a cabeza, pero para un seminovato, que solo conocía lo básico del diseño de páginas web como yo, nos ha dado dolor de cabeza...

He aqui el primero que me tope... como hacer girar una imagen???.

Para empezar me he topado con muchos tutoriales y foros que te explican bien, siempre y cuando tengas conocimientos avanzados de programación WEB...

Pero no te dicen que debes tener y donde lo puedes adquirir, me refiero a las JAVASCRIPTS, los cuales, en algunas ocasiones ya existen y te ayudan a solucionar muchos de tus problemas (debido a que muchos ya se toparon con ellos).

Requieres tener los scripts jquery.js y jquery.rotate.min.js (si los buscas en google los encuentras muy facilmente).

Estos scripts los puse entre las etiqueras HEAD.

Código:

<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.rotate.min.js"></script>

<!-- Este script da la orden a la imagen de girar 90°-->
<script type="text/javascript">
     var rotate_angle = 0;
     $(document).ready(function(){
          $('#rotate_button').click(function(){
               rotate_angle = ( rotate_angle == 360 ) ? 0 : rotate_angle +90;
               $('#imagen').rotate({ angle : rotate_angle });
               img.style.position="absolute"
               img.style.left="10px"
               img.style.top="10px"
          });
     });
</script>
</head>

Es momento de colocar nuestra imagen:

Código:

<body>
<img src="[ruta de la imagen]" id="imagen">

<!-- Colocamos un botón que ayude a girar la imagen -->
<input type="button" id="rotate_button">
</body>

Y hemos finalizado, es hora de poner en practica lo antes mencionado.

Espero sirva de algo para aquellos que no lo sepan y si alguien sabe de esto, solo... complemente...

SALUDOS A TODOS