title: Rotating image via CSS
body: <p>I am working on an app that uses Bootstrap. You can see it for yourself <a href="http://www.bootply.com/sFQhsmcEUZ" rel="nofollow">here</a>. When a user clicks a link, I want it to rotate. The code is very small. It looks like this:</p>
  
  <pre><code>&lt;div class="form-group"&gt;
    &lt;ul class="list-inline"&gt;
      &lt;li&gt;&lt;button class="btn btn-link"&gt;&lt;span class="glyphicon glyphicon-chevron-down"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;
      &lt;li&gt;&lt;h5&gt;category&lt;/h5&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When a user clicks the "v" I want it to animate from "v" to ">". In other words, I want the chevron to rotate counter-clockwise 90 degrees when someone clicks it. After looking at the powerful features in CSS 3, it looks like there is a way to do this using pure CSS. Am I correct, if so, how?</p>