Nossos cursos em promoção de férias

Rotacionar elementos com Javascript

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

Publicado em

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!

Gunnar Correa
Gunnar Correa

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

Deixe um comentário
Aguarde...