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

html css transform
Eugene Krevenets picture Eugene Krevenets · Nov 23, 2013 · Viewed 14.8k times · Source

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

m59 picture m59 · Nov 23, 2013

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

Related questions

How to play CSS3 transitions in a loop?

The following style is just an example of how to set transitions in CSS3. Is there a pure CSS trick to make this play in loop? div { width:100px; height:100px; background:red; transition:width 0.1s; -webkit-transition:width 0.1s; /* Safari …

Read More
Flip / mirror an image horizontally + vertically with css

Im trying to flip an image to display it 4 ways : original (no changes), flipped horizontally, flipped vertically, flipped horizontally + verticly. To do this Im doing the below, it works fine apart from the flip horizontally + vertically, any idea why this …

Read More
-webkit-transform rotate - Pixelated images in Chrome

Using -webkit-transform: rotate(-5deg); on a container div, Chrome renders the grid of images with really jagged edges. Whereas in FF (-moz-transform:) and IE (-ms-filter:) everything looks OK - see the difference below. Is there any thing I can …

Read More