How do I rotate the square when I click the button? JAVASCRIPT

Asked

Viewed 939 times

0

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Cubo Gira</title>
<style>
    body {
        background-color: beige;
    }
    #cubo {
        margin: auto;
        margin-top: 200px;
        width: 300px;
        height: 300px;
        background-color: red;

    }
    #btn {
        margin: auto;
        margin-left: 125px;
        margin-top: 125px;
        width: 50px;
        height: 25px;
    }

</style>
</head>
<body>

<div id="cubo">
    <input type="button" value="Girar" onclick="giro()" id="btn">
</div>
</body>
</html>

I wanted to use Function in the Code Script to add the Transform: Rotate() event squared when the button is clicked.

But I can’t use Document.getElementById("").style.Transform = Rotate();

The question, in general, is, how do I put two functions on that button. Function: Rotate the square into -45deg and 2° Function: Rotate the square into 45deg (return to initial position).

javascript html css

  • rotate() is not a JS function, but you can trigger it in the style as a string that will be interpreted by the CSS engine, thus: document.getElementById("cubo").style.transform = "rotate(-45deg)"

3 answers

2

vc can make a class, which calls a keyframe (css) responsible for spinning up to 50% 45 degrees and then at 100% back to 0 degrees. when you click on rotate, you add the css class. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

Sort of like this:

.girar {
  animation: girar 2s infinite linear;
}
@keyframes girar {
  0% {
    transform: rotate(0deg)
  }
  50% {
    transform: rotate(45deg)
  }
  100%{
    transform: rotate(0deg)
  }
}

function giro() {
  var cubo = document.getElementById('cubo') 
  cubo.classList.add('girar')
}

2

Face the easiest way to do this is by creating a class in CSS called for example .giro and with the JS you make a toggle of this class when the element is clicked. To better understand see the code below.

inserir a descrição da imagem aqui

function giro() {
   document.getElementById("cubo").classList.toggle('giro');
//o toggle vai adicionar e remover a classe a cada clique
}
body {
    background-color: beige;
}
#cubo {
    margin: auto;
    margin-top: 200px;
    width: 300px;
    height: 300px;
    background-color: red;

}
#btn {
    margin: auto;
    margin-left: 125px;
    margin-top: 125px;
    width: 50px;
    height: 25px;
}

/* classe que sera feita o toggle */
.giro {
    transform: rotate(-45deg);
}
<div id="cubo">
    <input type="button" value="Girar" onclick="giro()" id="btn">
</div>

OBS: If you want something similar, but only done with CSS see here /a/387486/97477

-2

Guys this is gambiarra! It would look like this:

Var Rotate = 90; 
Var img = document.getElementById("img");
//90 graus

Img.style.transform = "rotate("+rotate+"deg)";

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.