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

Question

So, I have a div, like this:

<div class="rotate-90"></div>

and the css:

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

and I want to add another class to the div, named "scale-2", like this:

<div class="rotate-90 scale-2"></div>

.scale-2
{
    transform: scale(2);
}

but when I try to combine them, the second class overrides the first one, so I get only a scaled div, and not rotated. So, how can I combine the transforms without writing the code twice or combining the classes codes?

Thanks :)

Answer 1

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