SHARE
TWEET

Rotate Square [JS]

SamGauths Oct 10th, 2019 67 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Rotate Square</title>
  5.        
  6.         <style>
  7.             #square
  8.             {
  9.                 width:100px;
  10.                 height:100px;
  11.                 background-color: red;
  12.                 transform: rotateZ(80deg);
  13.             }
  14.         </style>
  15.     </head>
  16.    
  17.     <body>
  18.         <h1>
  19.         <div id="square" style="text-align:center; margin-left:50px; margin-top:50px; color:pink; border:1px solid black;">
  20.             Hello
  21.         </div>
  22.         </h1>
  23.         <br/>
  24.         <div style="margin-left:50px; margin-top:50px;">
  25.         <button onclick="rotateSquareL()">Left</button>
  26.         <button onclick="rotateSquareR()">Right</button>
  27.         </div>
  28.         <script>
  29.             var deg = 0;
  30.             function rotateSquareL(){
  31.                 if(deg>=5){
  32.                 deg = deg - 5;
  33.                 document.getElementById('square').style.transform = 'rotateZ('+deg+'deg)';
  34.                 document.getElementById('square').innerHTML = deg + 'deg';
  35.                 }
  36.             }
  37.             function rotateSquareR(){
  38.                 if(deg<=355){
  39.                 deg = deg + 5;
  40.                 document.getElementById('square').style.transform = 'rotateZ('+deg+'deg)';
  41.                 document.getElementById('square').innerHTML = deg + 'deg';
  42.                 }
  43.             }
  44.         </script>
  45.     </body>
  46. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top