title: How to rotate and scale image simultaneously?
body: <p>I have an image element</p>
  
  <pre><code>&lt;img id="image"&gt;
  </code></pre>
  
  <p>To manipulate the image I have the following buttons:-</p>
  
  <pre><code>&lt;div class="btn-group"&gt;
      &lt;button type="button" class="js-zoom-in"&gt;
           Zoom In
      &lt;/button&gt;
      &lt;button type="button" class="js-zoom-out"&gt;
           Zoom Out
      &lt;/button&gt;
      &lt;button type="button" class="js-rotate-right"&gt;
           Rotate Right
      &lt;/button&gt;
      &lt;button type="button" class="js-rotate-left"&gt;
           Rotate Left
      &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And to handle the corresponding events I am using the below jquery:-</p>
  
  <pre><code>&lt;script&gt;
      var angle = 0;
      var scale = 1;
      $('.js-rotate-right').on('click', function() {
          angle += 15;
          $('#image').css('transform','rotate(' + angle + 'deg)');
      });
      $('.js-rotate-left').on('click', function() {
          angle -= 15;
          $('#image').css('transform','rotate(' + angle + 'deg)');
      });
      $('.js-zoom-in').on('click', function() {
          scale += 0.25;
          if(scale == 2.25){
            scale = 2;
          }
          $('#image').css('transform','scale(' + scale + ')');
      });
      $('.js-zoom-out').on('click', function() {
          scale -= 0.25;
          if(scale == 0){
            scale = 0.25;
          }
          $('#image').css('transform','scale(' + scale + ')');
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>If I rotate an image using these buttons and then try to zoom in or out the image gets restored to its original state. Same is the case when image is first scaled then rotated the image gets restored to original state.</p>
  
  <p>I have even tried to do something like this:-</p>
  
  <pre><code>$('#image').css('transform','rotate(' + angle + 'deg)', 'scale(' + scale + ')');
  </code></pre>
  
  <p>for the following function:-</p>
  
  <pre><code> $('.js-rotate-right').on('click', function() {
        angle += 15;
        console.log(scale);
        $('#image').css('transform','rotate(' + angle + 'deg)', 'scale(' + scale + ')');
    });
  </code></pre>
  
  <p>But still no effect.</p>