con esta función se puede rotar 90 grados con cada click hasta los 90. <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-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> <!-- end snippet -->