Girar imagen sobre su eje

dezagus · #1 (**permalink**) 05/11/2011, 15:02

Tengo una idea pero no tengo idea de como hacerlo

La cuestión es que quiero girar una imagen sobre su propio eje.
Osea, tomo el borde de la imagen y lo giro hasta cierta posición y luego suelto el clíc y queda allí estático en la nueva posición.

¿Es posible hacer algo así en javascript?

Panino5001 · #2 (**permalink**) 06/11/2011, 03:25

Fijate si te sirve algo así:

Código PHP:

  <!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<style type="text/css"> 
#cont{ position:absolute; left:50%; top:50%; margin-top:-175px; margin-left:-250px; cursor:pointer; width:500px; height:350px;} 
#cont img{ position:relative} 
</style> 
<script type="text/javascript"> 
function rotate(angle){ 
    var rotation = Math.PI * angle / 180; 
    var costheta = Math.cos(rotation); 
    var sintheta = Math.sin(rotation);  
    if(!window.ActiveXObject){ 
        this.style.position='absolute'; 
        this.style.webkitTransform ='rotate('+angle+'deg)'; 
        this.style.khtmlTransform ='rotate('+angle+'deg)';   
        this.style.MozTransform='rotate('+angle+'deg)';     
        this.style.OTransform='rotate('+angle+'deg)'; 
        this.style.transform='rotate('+angle+'deg)'; 
    }else{ 
        this.style.filter="progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')"; 
        this.filters.item(0).M11 = costheta; 
        this.filters.item(0).M12 = -sintheta; 
        this.filters.item(0).M21 = sintheta; 
        this.filters.item(0).M22 = costheta;  
        this.style.top= ((this.parentNode.offsetHeight/2)-(this.offsetHeight/2))+'px'; 
        this.style.left=  ((this.parentNode.offsetWidth/2)-(this.offsetWidth/2))+'px'; 
    } 
} 
var ns={} 
onload=function(){ 
    (function(){ 
    document.getElementById('im').onmousedown=function(){ 
        var _this=this; 
        ns.angulo=ns.angulo || 0; 
        ns.timmer=setInterval(function(){rotate.call(_this,ns.angulo+=5)},30); 
    } 
    document.getElementById('im').onmouseup=function(){ 
        clearInterval(ns.timmer); 
    } 
    })(); 
} 
</script> 
 
</head> 
 
<body> 
<div id="cont"><img id="im" src="http://www.disegnocentell.com.ar/arwen.jpg" width="500" height="350"  /></div> 
</body> 
</html>

Podés verlo funcionando: http://jsfiddle.net/panino/gR9TW/

dezagus · #3 (**permalink**) 06/11/2011, 07:19

Super, era masomenos lo que estaba buscando, ya tengo con que trabajar.
GRACIAS

dezagus · #4 (**permalink**) 06/11/2011, 07:32

Hay un pequeño bug:

Cuando quito el ratón sobre la imagen y sigo haciendo clíc, sigue girando sola la imagen.
Que funcion podria agregar para que deje de girar?

dezagus · #5 (**permalink**) 06/11/2011, 07:37

<div id="cont"><img id="im" src="http://www.disegnocentell.com.ar/arwen.jpg" width="500" height="350" onMouseOut="javascript:clearInterval(ns.timmer);" /></div>

Solucionado!