1

estoy varado en un un código con javascript. el código consiste en hacer click en un elemento div y este debe rotar 90grados por cada click hasta llegar a 360grados. yo todavía no encuentro como hacer una función que pueda ejecutar esto.

<html>
<head>
    <title>myPage</title>
    <style>
*{margin:0;padding:0;box-sizing:border-box}


.contenedor{width:100%;height:100vh;border:2px solid brown; display:flex; justify-content:center;align-items:center}


.rolover{width:40%;height:30%;border:2px solid navy;}

    </style>
</head>
<body>
<div class="contenedor">
<div class="rolover" id="rol">
    <p>rolover</p>
</div>  
</div>
</body>
<script>
Myfunction=()=>{


x.style.transform="rotate(90deg)";
}

let x=document.getElementById("rol");


x.addEventListener("click",Myfunction);
</script>
</html>

1 respuesta 1

3

con esta función se puede rotar 90 grados con cada click hasta los 90.

    <html>
      <head>
        <title>myPage</title>
        <style>
          * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
          }

          .contenedor {
            width: 100%;
            height: 100vh;
            border: 2px solid brown;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          .rolover {
            width: 40%;
            height: 30%;
            border: 2px solid navy;
          }
        </style>
      </head>
      <body>
        <div class="contenedor">
          <div class="rolover" id="rol">
            <p>rolover</p>
          </div>
        </div>
      </body>
      <script>
        let rotation = 0;
        Myfunction = () => {
          if (rotation >= 360) return;
          rotation += 90;
          x.style.transform = `rotate(${rotation}deg)`;
        };

        let x = document.getElementById('rol');

        x.addEventListener('click', Myfunction);
      </script>
    </html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.