Incrementando a rotação da Imagem

Boa tarde galera,

eu estou gerando uma imagem em uma página, e na mesma tem um botão que ao clicar, a imagem gira 90º graus, mas é o seguinte.. eu queria continuar clicando e está imagem ir sendo incrementada em mais 90º e continuar a girar tb! mas eu meio que fiquei empacado aqui nessa lógica... eu tenho ese código ai..

function gira()
{

// aqui ele gira 90º tranquilo

 var ele=document.getElementById("imgr");

 ele.style.webkitTransform="perspective(100px) [b]rotate(90deg)";[/b]
 ele.style.MozTransform="perspective(100px) [b]rotate(90deg)";[/b]
 ele.style.OTransform ="perspective(100px) r[b]otate(90deg)";[/b]

 var css1=document.getElementById("imgr").style.webkitTransform;
 var css2=document.getElementById("imgr").style.MozTransform;
 var css3=document.getElementById("imgr").style.OTransform;

// essa parte aqui eu estava tentando fazer.. testando na verdade para ver se eu conseguiria girar ela mais uma vez no click..

if((css1=="perspective(100px) rotate(90deg)") && (css2=="perspective(100px) rotate(90deg)") && (css3=="perspective(100px) rotate(90deg)")){

 ele.style.webkitTransform="perspective(100px) [b]rotate(180deg)[/b]";
 ele.style.MozTransform="perspective(100px) [b]rotate(180deg)[/b]";
 ele.style.OTransform ="perspective(100px) [b]rotate(180deg)[/b]";

}

} cheguei até pensarem um while.. ma fiquei sem saber com o que comparar para ir travando o loop.. mas foi só pensamento..

alguém pode ajudar-me nessa questão do giro?