title: Applying CSS transform scale and rotate simultaneously
body: <p>I have a page that has an image that can be zoomed and rotated. See an example of it here: <a href="http://jsfiddle.net/viniciuspaiva/38AzW/" rel="nofollow">http://jsfiddle.net/viniciuspaiva/38AzW/</a></p>
  
  <p>I used CSS transform to that, but the button that rotates is different than the button that applies the zoom, so I needed the CSS to, somehow, save the previously state (zooming a rotated image, for example).</p>
  
  <p>I tried a "brute-force" approach, creating a data-state (0, 1, 2 or 3) attribute that controls the rotation and a class "zoom" that applies the zoom. But when I zoom, I can't maintain the rotation.</p>
  
  <p>I tried also creating a lot of CSS to prevent all the cases, example below, but didn't work.</p>
  
  <pre><code>.zoom [data-state='0']{  
  transform: scale(1.3) rotate(0deg);
    -ms-transform: scale(1.3) rotate(0deg); /* IE 9 */
    -moz-transform: scale(1.3) rotate(0deg); /* Firefox */
    -webkit-transform: scale(1.3) rotate(0deg); /* Safari and Chrome */
    -o-transform: scale(1.3) rotate(0deg); /* Opera */
  }
  
  [data-state='0']{  
    transform: rotate(0deg);
    -ms-transform: rotate(0deg); /* IE 9 */
    -moz-transform: rotate(0deg); /* Firefox */
    -webkit-transform: rotate(0deg); /* Safari and Chrome */
    -o-transform: rotate(0deg); /* Opera */
  }
  </code></pre>