Rotacionar elementos com Javascript

Gunnar CorreaGunnar Correa23/02/2015 às 06:04:34 - 12.632 acessos

Veja como Rotacionar um elemento usando CSS através do Javascript.


Aqui vamos criar um pequeno projeto, que consiste em uma imagem e dois botões, um para ir para frente e o outro voltar.

Para isto vamos precisar utilizar a propriedade transform rotate do CSS, ela é responsável por Rotacionar um elemento.

Esta propriedade será modificada através do Javascript, para avançar vamos adicionar valores positivos e para voltar valores negativos, mas vale lembrar que uma volta completa é 360º, então se atingir este valor teremos que zerar, ou seja, voltar para o valor 0, para fazer este controle vamos precisar declarar uma variável.

A sintaxe que nos possibilita efetuar esta rotação é transform: rotate(7deg);.

Veja todo o código comentado abaixo, como citado anteriormente, vamos Rotacionar uma imagem, para seu exemplo use uma imagem de sua preferencia.

Note que temos dois botões com seus respectivos ID e também um elemento IMG com um ID.

Código 01:

<!doctype html>
<html lang="pt-br">
	<head>
		<title></title>
		<meta charset="utf-8" />
		<script>
		
			rotate = 0; // Declaramos uma variável com a rotação 0.
			
			document.addEventListener("DOMContentLoaded", function(){ // Usando eventListener, e quando a página for carregada...
			
				document.getElementById("next").addEventListener("click", function(){ //Quando houver um clique no botão next..
				
					if(rotate== 360){rotate = 0} //Verificamos se o valor da variável rotate é 360, se for zeramos o valor.
				
					rotate = rotate + 30; //Fazemoz um incremento de 30, ou seja se antes tinha 0 e incrementamos 30 temos o valor de 30, na próxima execução se temos 30 e incrementamos mais 30, vamos para 60 e assim por diante.
					
					document.getElementById("img").style.transform = "rotate("+rotate+"deg)"; //Acessamos o elemento img e através do style.transform atribuimos o rotate com o valor atual de nossa variável.
				});
				
				document.getElementById("back").addEventListener("click", function(){ //Quando houver um clique no botão voltar..
				
					if(rotate== -360){rotate = 0} //Verificamos se o valor da variável rotate é -360, se for zeramos o valor.
				
					rotate = rotate + -30 ;//Fazemoz um incremento de -30, ou seja se antes tinha 0 e incrementamos -30 temos o valor de -30, na próxima execução se temos -30 e incrementamos mais -30, vamos para -60 e assim por diante. isto fará nosso elemento voltar.
					
					document.getElementById("img").style.transform = "rotate("+rotate+"deg)"; //Acessamos o elemento img e através do style.transform atribuimos o rotate com o valor atual de nossa variável.
				});		
			});
			
		</script>
	</head>
	<body>
		<img src="img.png" class="" id="img" alt="Teste" />
		<!--Aqui você carrega a imagem de sua escolha -->
		<br />
		<button id="back">Voltar </button> <!--botão voltar-->
		<button id="next">avançar</button> <!--botão avançar-->
	</body>
</html>

Espero que tenham aprendido, até a próxima!


javascript css html objeto imagem rotacionar elemento matéria tutorial web browser site programação transform rotate degress

Compartilhe nas redes sociais



Gunnar Correa

Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web (FIPP), Especialista em Tecnologias na Educação (Unoeste) e Pós-graduando em Segurança da Informação (Universidade Cruzeiro do Sul). Começou seus estudos na área de programação quando era criança, e atualmente está estudando desenvolvimento de jogos. É CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.