title: Rotation code for onclick does not work?
body: <p>I have a picture of an arrow, which is pointing to the right and that is how the image came. However, the picture is supposed to be facing downwards, which I did correctly. What I am trying to do is get the arrow to point upwards (rotating 180 degrees specifically counterclockwise) when the user clicks the image.</p>
  
  <pre><code>&lt;img class="moreIndicator rot90" src="img/more.png" alt="More Content"/&gt;
  </code></pre>
  
  <p>There are two classes for this element. "moreIndicator" and "rot90" are two separate classes. Here is what I have for those.</p>
  
  <pre><code>.moreIndicator {
      display: block;
      height: 50px;
      width: 50px;
      position: relative;
       margin-left: auto;
      margin-right: auto;
      z-index: 3;
      opacity: .8;
      top: 0px;
  
  
  }
  </code></pre>
  
  <p>The code above is just for centering it on the page.</p>
  
  <p>This is the rotation to 90 degrees code:</p>
  
  <pre><code>.rot90 {@-moz-keyframes spin { 100% { -moz-transform: rotate(90deg); } }
  @-webkit-keyframes spin { 100% { -webkit-transform: rotate(90deg); } }
  @keyframes spin { 100% { -webkit-transform: rotate(90deg); transform:rotate(90deg); } }
  -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      transform: rotate(90deg);
  }
  </code></pre>
  
  <p>The code above correctly works to have the picture rotated 90 degrees pointing downwards. Here is the .rot180 code:</p>
  
  <pre><code>.rot180 {@-moz-keyframes spin { 100% { -moz-transform: rotate(180deg); } }
  @-webkit-keyframes spin { 100% { -webkit-transform: rotate(180deg); } }
  @keyframes spin { 100% { -webkit-transform: rotate(180deg); transform:rotate(180deg); } }
  -webkit-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      -o-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      transform: rotate(180deg);
  }
  </code></pre>
  
  <p>I tried writing all kinds of Javascript codes to get it to rotate to have the arrow pointing upwards starting from the pointing down position when you click the image. What am I supposed to do?</p>