Skip to main content
se añadieron 297 caracteres en el cuerpo
Origen Enlace
user128299
user128299
<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>

    <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>

<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>

    <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>

Origen Enlace

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>