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!
