title: jQuery - Rotating an image on click and rotating back the next click
body: <p>I have a fiddle to demonstrate what I'm trying to do.</p>
  
  <p><a href="http://jsfiddle.net/LxtmM/" rel="nofollow">http://jsfiddle.net/LxtmM/</a></p>
  
  <p><strong>jQuery:</strong></p>
  
  <pre><code>$(".arrow").on("click", function() {
              $(".arrow").toggleClass("rotate").css({ "-moz-transform" : "rotate(-90deg)", "-webkit-transform" : "rotate(-90deg)", "-ms-transform" : "rotate(-90deg)", "-o-transform" : "rotate(-90deg)" });
          });
  </code></pre>
  
  <p>Basically, I want it so that when you click the arrow it rotates -90degrees and then rotates back on the next click.  I understand that needs some sort of toggle.  But I learned that you can just toggle a class that has the CSS3 transform rotate.</p>
  
  <p>When you click it, it rotates and adds the class, if you click it again it removes the class but it doesn't animate back.  I'm not sure if I should expect it rotate back when the rotate class is toggled off but it's not working nonetheless.</p>
  
  <p>Thanks!</p>