Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Dlms

Incrementando a rotação da Imagem

Por , em Javascript

Recommended Posts

Dlms    4

Dlms
Postado

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?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Hum... eu faria com css, em vez de usar o .style direto no javascript.

 

vai ficar mais simples. 4 classes no teu css, e o js apenas manipula elas. Assim vc deixa os vendor prefixes para o css também.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Dlms    4

Dlms
Postado

haha tá bom! e como faço? eu até tentei com css direto.. mas com certez não foi a maneira como vc está falando ai.. esse código que postei seria a ultima tentativa minha..

 

ainda preciso de ajuda!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Bem simples, o script ficou assim:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

<style>
.rt90 {
    -webkit-transform: perspective(100px) rotate(90deg);
       -moz-transform: perspective(100px) rotate(90deg);
            transform: perspective(100px) rotate(90deg);
}
.rt180 {
    -webkit-transform: perspective(100px) rotate(180deg);
       -moz-transform: perspective(100px) rotate(180deg);
            transform: perspective(100px) rotate(180deg);
}
.rt270 {
    -webkit-transform: perspective(100px) rotate(270deg);
       -moz-transform: perspective(100px) rotate(270deg);
            transform: perspective(100px) rotate(270deg);
}
.rt0 {
    -webkit-transform: perspective(100px) rotate(0deg);
       -moz-transform: perspective(100px) rotate(0deg);
            transform: perspective(100px) rotate(0deg);
}
</style>
</head>
<body>

<img src="gatinho.jpg" alt="" id="img">

<input type="button" id="btn" value="rotate" />

<script>
(function(){
    var $img = document.getElementById("img"),
        $btn = document.getElementById("btn"),
        classes = ["rt90","rt180","rt270","rt0"],
        i = 0,
        max = classes.length;

    $btn.addEventListener("click", function(){
        $img.classList.remove("rt90","rt180","rt270","rt0");
        $img.classList.add(classes[i]);
        i = i < max - 1 ? i + 1 : 0;
    });
}());
</script>
</body>
</html>
Demonstração online:

http://wbruno.github.io/examples/rotate/

 

Eu te disse como fazer no primeiro post. Dali em diante vc tem que tentar e perguntar o que não entendeu. Só fiz esse script pq era bem simples seguir o que eu sugeri, e estava com tempo aqui. Mas não é o "padrão"

Compartilhar este post

Link para o post
Compartilhar em outros sites

Dlms    4

Dlms
Postado

William,

 

como eu disse, eu já tinha tentador fazer desta maneira.. algo parecido.. mas não rolou.. de qualquer forma.. obrigado pelo script e por gastar o seu tempo fazendo.. de uma forma ou de outra estou aprendendo! vou analisar o script vlw!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Dlms    4

Dlms
Postado

Wiliam,

 

vc poderia me explicar essas 3 linhas?

 

 

classes = ["rt90","rt180","rt270","rt0"], <-- isto é uma variável recebendo um array?

$img.classList.remove("rt90","rt180","rt270","rt0"); <-- primeiro vc remove todos os itens da lista depois incrementa na linha debaixo?
$img.classList.add(classes[i]);

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado 

classes = ["rt90","rt180","rt270","rt0"],
uma variável recebendo um array.

$img.classList.remove("rt90","rt180","rt270","rt0");
removo todas as classes possíveis do item

$img.classList.add(classes[i]);
adiciono a classe no item

Compartilhar este post

Link para o post
Compartilhar em outros sites

Dlms    4

Dlms
Postado

Brother, foi mal ai depois de tanto tempo perguntar.. mas eu tava revendo o código e fiquei com uma dúvida nessa linha i = i < max -1 ? i + 1 : 0;

 

o que é esse -1 ? eu verifiquei que ele mexe diretamente com a rotação.. mas nao entendi se ele ta diminuindo.. do max ou se é algum parametro..

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

O -1 está diminuindo de max.

Toda essa linha é referente ao array de classes.

i é a posição do array.

max é o número de itens do array.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito