Logré que una imagen gire sobre si misma.
Pero el problema es que gira para un solo lado, necesito que gira para ambos lados, la cuestion es que es algo complejo (para mi, que no se casi nada de js).
Osea, actualmente funciona detectando cuando se hace clic con el mouse y comienza la rotación de la imagen hasta que se suelta el clic. La idea es que la imagen acompañe la direccion del mouse, osea no solo cuando hace clic, sinó cuando hace el movimiento y el lado para cual hace el movimiento, siempre, manteniendo su posicion en el centro.
Dejo el código aver si pueden echar una mano.
Gracias desde ya!
Código:
<!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)';
document.capcha.num.value= this.style.webkitTransform = angle - (parseInt((this.style.webkitTransform = angle) / 360) * 360);
document.capcha.num.value= this.style.webkitTransform = angle - (parseInt((this.style.khtmlTransform = angle) / 360 * 360));
document.capcha.num.value= this.style.webkitTransform = angle - (parseInt((this.style.MozTransform= angle) / 360) * 360);
document.capcha.num.value= this.style.webkitTransform = angle - (parseInt((this.style.OTransform= angle) / 360) * 360);
document.capcha.num.value= this.style.webkitTransform = angle - (parseInt((this.style.transform= angle) / 360) * 360);
}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); GIRA PARA LA DERECHA */
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" onMouseOut="javascript:clearInterval(ns.timmer);" /></div>
<form name="capcha" method="post" action="">
<label>
<input type="text" name="num">
</label>
</form>
</body>
</html>