title: How to do onclick in CSS to do transition on image?
body: <p>I'm trying to rotate image by 180 degrees. The code below is working on hover, how can I do this when the image is clicked?</p>
  
  <p>Is there a simple way to do this by using <strong>CSS</strong>? </p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>img {
      display: block;
  }
  
  .rotate {
      -webkit-transition-duration: 2s;
      -moz-transition-duration: 2s;
      -o-transition-duration: 2s;
      transition-duration: 2s;
      -webkit-transition-property: -webkit-transform;
      -moz-transition-property: -moz-transform;
      -o-transition-property: -o-transform;
      transition-property: transform;
  }
  
  .rotate:hover {
      -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      transform: rotate(180deg);
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;body&gt;
     &lt;img class="rotate" src="/images/object.png" /&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/legionar/a1r1hyyt/" rel="nofollow"><strong>JSFiddle</strong></a></p>