title: Rotate and unrotate an image onClick with javascript
body: <p>I have been trying to find how to make an image rotate 90 degrees to the right on the first click, and when clicked again, return to it's original orientation.
  I was looking at this question made by another person on stack overflow, but <a href="https://stackoverflow.com/questions/16794310/rotate-image-with-javascript">this</a> didn't include the image rotating back when it was clicked again.</p>
  
  <p>So far, CSS has shown potential, but I cannot seem to get the image rotated back on the second click.</p>
  
  <p>This is the image if you need a reference:
  <a href="https://i.stack.imgur.com/IAY0q.png" rel="nofollow noreferrer">image</a></p>
  
  <p>Here is my script:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;style&gt;
              .rotate {
                 -ms-transform: rotate(90deg);
                  -webkit-transform: rotate(90deg);
                   transform: rotate(90deg);
              }
  
              .normal {
                 -ms-transform: rotate(0deg);
                  -webkit-transform: rotate(0deg);
                   transform: rotate(0deg);
              }
          &lt;/style&gt;
  
          &lt;script&gt;
          function Rotate() {
              var rotate = 0
              var rotate = rotate + 1
  
              if (rotate = 2) {
                  document.getElementbyID(image).className = 'normal';
              }
              else if (rotate &lt;= 3) {
                  var rotate = 0
                  location.reload();
              }
              else {
                  document.getElementbyID(image).className = 'rotate';
              }
          }
          &lt;/script&gt;
  
  
      &lt;/head&gt;
      &lt;body&gt;
          &lt;img src="http://i.stack.imgur.com/IAY0q.png" alt="image" onclick="Rotate()" class="normal" id="image"/&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>