© 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>
//<![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.
