title: animate scale and rotate separately with css3 and jquery
body: <p><strong>UPDATED and CLARIFIED</strong></p>
  
  <p>I need to execute some jquery that does an immediate rotate (using css3 <em>transform</em>) on an icon. And then once the icon is rotated I want to animate and scale to 200% of the size. However, since scale and rotate are both one CSS3 property (transform) I am seeing that both of the transitions are occurring as an animation for 0.5s. (in the JQUERY code I also update the location (top, left), but since that is not in the transition: tag, it happens immediately as required).</p>
  
  <p>What I want is the rotate to happen immediately, and the scale to happen over 2s. Any ideas?</p>
  
  <p>CSS:</p>
  
  <pre><code>transition: transform 0.5s;
  -webkit-transition: -webkit-transform 0.5s;
  </code></pre>
  
  <p>JQUERY:</p>
  
  <pre><code>self.pick = function (cmd) {
      var pt = Tools.cmdToPoint(cmd);
      $(self.bbox).css("position", "fixed");
      $(self.bbox).css("top", pt.y - 32);
      $(self.bbox).css("left", pt.x - 32);
      $(self.bbox).css("opacity", "1");
      var theta = self.angle(cmd);
      $(self.bbox).css("transform", "rotate(" + theta + "deg) scale(2.0)");
      $(self.bbox).css("-webkit-transform", "rotate(" + theta + "deg) scale(2.0)");
  }
  </code></pre>
  
  <p>What happens is that since transition on the item, both the scale and the rotate occur in an animation over 0.5s.</p>