title: Multiple, simultaneous CSS3 transform transitions at varied speeds
body: <h2>Question:</h2>
  
  <p>Is it even possible to do two different transforms on an element and have them transition at different speeds?</p>
  
  <h2>Example without transforms (<a href="http://jsfiddle.net/Kbcw6/" rel="noreferrer">Fiddle</a>):</h2>
  
  <pre><code>div {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 1s linear, height 2s linear;
  }
  
  div:hover {
    width: 200px;
    height: 400px;
  }
  </code></pre>
  
  <p>Notice how it takes 1 second for the width to expand to 200px, and 2 seconds for the height to expand to 400px.</p>
  
  <h2>Example with transforms (<a href="http://jsfiddle.net/dV24s/1/" rel="noreferrer">Fiddle</a>):</h2>
  
  <pre><code>div {
    width: 100px;
    height: 100px;
    background: red;
    transition: transform 1s linear, transform 2s linear;
  }
  
  div:hover {
    transform: scale(1.5);
    transform: rotate(45deg);
  }
  </code></pre>
  
  <p>Notice how it only performs the second transform. How can you specify which transform to perform for the transition? Is this an oversight in the design of CSS transforms? How can I go about accomplishing this?</p>