Rotacionar elementos com Javascript

CursoSimplificando o desenvolvimento de APIs PHP com Swagger

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!