Girar imagenes con un click

© REDEANDO Blog 2013.
Combinando un poquito de Javascript y otro poquillo de CSS3 podemos conseguir que cualquier imagen de nuestro blog o web gire al hacer click con el raton sobre ella.
Para poner este efecto en una imagen, la cuestion es muy sencilla. Copiamos y pegamos el siguiente codigo donde queramos mostrarla, sustituyendo lo que esta en color rojo por la url de dicha imagen: <img src="URL DE LA IMAGEN" id="girar"><script>
//<![CDATA[
$('#girar').on("click", function(e) {
  e.preventDefault();
  $('#girar').addClass('giro');
 
  var t1 = setTimeout(function() {
  $('#girar').removeClass('giro');
  }, 1000);
});
  //]]>
</script>
<style>
#girar {
  position: relative;cursor:pointer;
  -webkit-transition: all 500ms ease-in-out;
   -moz-transition: all 500ms ease-in-out;
   -o-transition: all 500ms ease-in-out;
   -ms-transition: all 500ms ease-in-out;
}
#girar.giro {
   -webkit-transform: rotate(90deg);
   -moz-transform: rotate(90deg);
   -ms-transform: rotate(90deg);
   -o-transform: rotate(90deg);
   transform: rotate(90deg);
   zoom: 1;
}
</style>

En caso de que queramos que gire hacia otro lado, modificando la parte del codigo CSS (-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg);), podemos cambiar el agulo de rotacion. Y como ejemplo, aqui teneis 2 imagenes, podeis hacer click en cualquiera de ellas para comprobarlo.