title: css3 transform rotation of an image
body: <p>I would like to rotate an image 180 degrees when it is clicked. Then rotate that same image a further 180 degrees (completing the revolution) on subsequent click.</p>
  
  <p>I have achieved the first part using:</p>
  
  <pre><code>.img_rotator_180 { 
  -webkit-transform: rotate(180deg); 
  -moz-transform: rotate(180deg); 
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg); 
  }
  .img_rotator_360 { 
  -webkit-transform: rotate(180deg); 
  -moz-transform: rotate(180deg); 
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg); 
  }
  .img_rotator_transition {
    -webkit-transition: all 1s ease-out;  /* Chrome 1-25, Safari 3.2+ */
       -moz-transition: all 1s ease-out;  /* Firefox 4-15 */
         -o-transition: all 1s ease-out;  /* Opera 10.50–12.00 */
            transition: all 1s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.50+
  }
  </code></pre>
  
  <p>And</p>
  
  <pre><code>$('div.' + this.id + ' img').addClass('img_rotator_180 img_rotator_transition');
  </code></pre>
  
  <p>Alternative version:</p>
  
  <pre><code>$('div.' + this.id + ' img').addClass('img_rotator_180 img_rotator_transition');
  </code></pre>
  
  <p>What happens with this is that the images initial rotation is not remembered meaning that the second rotation effectively redoes the 180 degree rotation.</p>
  
  <p>Is there a way to establish the images current rotation before applying further transformation? Or perhaps a way to append rotation rather than replace it?</p>
  
  <p>Thank you</p>