How to mix css3 transform properties without overriding (in realtime)?

Question

Is there any way to combine (mix) css transform properties without overriding? For example there I want to rotate and scale. http://jsfiddle.net/hyzhak/bmyN3/

html

<div class="item rotate-90 tiny-size">     Hello World! </div> 

css

.rotate-90 {     -webkit-transform: rotate(90deg); } .tiny-size {     -webkit-transform: scale(0.25, 0.25); } 

PS

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.

As well I want to do it in realtime.

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

10*10*10*10*10 = 100000 cases 

It is a bad solution.

Answer 1

Hmm...as far as I know, you would have to create new class and combine them this way (separated by a space):

-webkit-transform: rotate(90deg) scale(0.25, 0.25); 

Answer 2

The way I get around this issue is to add a wrapper class around the one I want. For example, I have the wrapper which has its position set via javascript, and then the internal which is is affected by css animations - both on the transform property.

I know adding DOM nodes isn't ideal but it circumvents the script-heavy solution and lets the browser optimise the animations and transitions as it would normally.