title: jQuery - Scale and rotate transition simultaneously on clicked div
body: <p>I am trying to make a div rotate and grow on click using jQuery. Here is my js:</p>
  
  <pre><code>var degrees = Math.random() * 20;
  
  var flag = 0;
  
  $(".rotate").click(function() {
      if (flag == 0) {
          flag = 1;
          $(this).css({
              '-webkit-transform': 'rotate('+degrees+'deg)',
              '-moz-transform': 'rotate('+degrees+'deg)',
              '-ms-transform': 'rotate('+degrees+'deg)',
              '-o-transform': 'rotate('+degrees+'deg)',
              'transform': 'rotate('+degrees+'deg)',
  
              '-webkit-transform': 'scale(2)',
              '-moz-transform': 'scale(2)',
              '-ms-transform': 'scale(2)',
              '-o-transform': 'scale(2)',
              'transform': 'scale(2)'
          });
          degrees = Math.random() * 20;
      } else {
          flag = 0;
          $(this).css({
              '-webkit-transform': 'rotate(0deg)',
              '-moz-transform': 'rotate(0deg)',
              '-ms-transform': 'rotate(0deg)',
              '-o-transform': 'rotate(0deg)',
              'transform': 'rotate(0deg)'
          });
      };
  });
  </code></pre>
  
  <p>My issue is that the rotation was working, until I added the scaling, at which point the div would grow, but not rotate. Why is this, and how can I fix it? Just to add, in my css, I have included the transition so that the transforms are animated. Here is a jsfiddle: <a href="http://jsfiddle.net/HamishT/4Lhyaxwn/" rel="nofollow">http://jsfiddle.net/HamishT/4Lhyaxwn/</a></p>