CSS – add transform to element without removing the existing one [duplicate]

Update 2022

At the end of last year the W3C published the working draft for “CSS Transforms Module Level 2”.

This spec adds new transform functions and properties for three-dimensional transforms, and convenience functions for simple transforms.

It adds “Individual Transforms”:

• translate
• scale
• rotate

As the browser-support is over 85% it should be usable, if your project does not have to support old browsers.

So you should be able to do this from now on:

.rotate-90
{
    rotate: 90deg;
}

.scale-2
{
    scale: 2;
}

Here is a nice introduction-video:
“A new way to do CSS transforms!” by Kevin Powell.

Original Answer:

Transform-rules get overridden, like any other rules.

You can however combine the transforms in one rule:

.rotate-90.scale-2 {
    transform: rotate(90deg) scale(2);
}

If combining the two classes isn’t your wish (which I totally don’t understand, but respect), and if your framework only has these two effects, than you could use zoom for the scale-rule:

.scale-2 {
    zoom: 2;
}