Los botones a continuación funcionan bien por sí solos, pero cuando crecer y rotar están en efecto, entonces el cuadro grande rotado se superpone con el texto... ¿Cómo hago para que el cuadro grande cambie sus márgenes SOLO cuando también se presiona el botón rotar?

 //Press "grow" button box grows document.getElementById('button1').addEventListener("click", growBtn); function growBtn() { document.getElementById('box').style.height = "300px"; document.getElementById('box').style.width = "300px"; } //Press "rotate" button box rotates //Margins added to keep the box from overlapping on text document.getElementById('button4').addEventListener("click", rotateBtn); function rotateBtn() { document.getElementById('box').style.transform = "rotate(45deg)"; document.getElementById('box').style.marginBottom = "50px"; document.getElementById('box').style.marginTop = "50px"; document.getElementById('box').style.marginLeft = "50px"; }

Soy nuevo en JS, por lo que es posible que deba señalarme un recurso o darme una explicación más detallada sobre cómo funciona la respuesta.