title: How to mix css3 transform properties without overriding (in realtime)?
body: <p>Is there any way to combine (mix) css transform properties without overriding? For example there I want to rotate and scale.
  <a href="http://jsfiddle.net/hyzhak/bmyN3/">http://jsfiddle.net/hyzhak/bmyN3/</a></p>
  
  <h1>html</h1>
  
  <pre><code>&lt;div class="item rotate-90 tiny-size"&gt;
      Hello World!
  &lt;/div&gt;
  </code></pre>
  
  <h1>css</h1>
  
  <pre><code>.rotate-90 {
      -webkit-transform: rotate(90deg);
  }
  .tiny-size {
      -webkit-transform: scale(0.25, 0.25);
  }
  </code></pre>
  
  <h1>PS</h1>
  
  <p>I just have a lot of elements and a lot of simple classes to transform view of the elements. And I just want to tune view of them by adding and removing some classes. Combining of all classes doesn't work because it will be hundreds of combinations.</p>
  
  <p>As well I want to do it in realtime.</p>
  
  <p>The number of transformations can be approximately 5 and each of them can hold about 10 states - so just describe all combinations of them with hands give you approximately</p>
  
  <pre><code>10*10*10*10*10 = 100000 cases
  </code></pre>
  
  <p>It is a bad solution.</p>