html - 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);