Hola, muchas gracias por la respuesta la verdad es que me ha sido muy util. Este codigo usando canvas te lo hace solo:
Código HTML:
<script>
function rotar(obj,angulo){
if (angulo >= 0) {
var rotation = Math.PI * angulo / 180;
} else {
var rotation = Math.PI * (360+angulo) / 180;
}
var costheta = Math.cos(rotation);
var sintheta = Math.sin(rotation);
if (document.createElement("canvas").getContext) {
/* ---- canvas ---- */
var c=document.createElement('canvas');
c.width = Math.abs(costheta*obj.width) + Math.abs(sintheta*obj.height);
c.style.width = c.width+'px';
c.height = Math.abs(costheta*obj.height) + Math.abs(sintheta*obj.width);
c.style.height=c.height+'px';
c.id=obj.id;
c.style.position='absolute';
var ctx=c.getContext('2d');
ctx.save();
if (rotation <= Math.PI/2) {
ctx.translate(sintheta*obj.height,0);
} else if (rotation <= Math.PI) {
ctx.translate(c.width,-costheta*obj.height);
} else if (rotation <= 1.5*Math.PI) {
ctx.translate(-costheta*obj.width,c.height);
} else {
ctx.translate(0,-sintheta*obj.width);
}
ctx.rotate(rotation);
ctx.drawImage(obj, 0, 0, obj.width, obj.height);
obj.parentNode.replaceChild(c,obj);
ctx.restore();
}else{
/* ---- DXImageTransform ---- */
obj.style.position='absolute';
obj.style.filter="progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')";
obj.filters.item(0).M11 = costheta;
obj.filters.item(0).M12 = -sintheta;
obj.filters.item(0).M21 = sintheta;
obj.filters.item(0).M22 = costheta;
}
}
window.onload=function(){
rotar(document.getElementById('pp'),22);
}
</script>
El problema es que gira la imagen desde el centro. Se puede hacer que la imagen gire desde un punto concreto dandole coordenadas o algo asi? Al ser una aguja, siempre me interesaria que rotara desde la base de la misma (como si fuera un reloj)