-1

Estou criando um editor de imagem e preciso colocar 2 botões que girem 90º pra esquerda ou 90º para direita e que possa girar mais de uma vez

mais só consegui fazer girar uma vez para um lado gostaria de ajuda para fazer 90º pra esquerda ou 90º para direita e que possa clicar mais de uma vez

let btnLeft = document.getElementById("noventaDireita");
let btnRigth = document.getElementById("noventaEsquerda");
let imgRotate = document.getElementById("imageRotate");

btnLeft.addEventListener('click', () => {
  imgRotate.style.transform = "rotate(90deg)";
})

btnRigth.addEventListener('click', () => {
  imgRotate.style.transform = "rotate(270)";
})
1

1 Resposta 1

-1

Acredito que tenha achado a solução lendo a documentação da propriedade transform, mas mesmo assim vou colocar ela aqui pra você:

let btnLeft = document.getElementById("noventaDireita");
let btnRigth = document.getElementById("noventaEsquerda");
let imgRotate = document.getElementById("imageRotate");
let angle = 0;

btnLeft.addEventListener('click', () => {
    angle += 90;
  imgRotate.style.transform = `rotate(${angle}deg)`;
})

btnRigth.addEventListener('click', () => {
    angle -= 90;
  imgRotate.style.transform = `rotate(${angle}deg)`;
})

Você só precisaria guardar a angulação atual da imagem em uma variável, e assim que o usuário apertasse o botão, você adicionava ou removia 90 graus dessa variável e enviava pra propriedade transform da imagem, fazendo ela rotacionar.

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .