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

Question

This question already has answers here:
How can I apply multiple transform declarations to one element?
(5 answers)
Closed 6 years ago.
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

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

Answer 2

Because you are using transform property again and its overriding previous one.
You can use both in one transform like this
.rotate-90.scale-2 {
transform: rotate(90deg) scale(2);
}
Transform property should be used with prefix to let it work in all browsers like this
.rotate-90.scale-2 {
transform: rotate(90deg) scale(2);
-moz-transform: rotate(90deg) scale(2);
-ms-transform: rotate(90deg) scale(2);
-webkit-transform: rotate(90deg) scale(2);
-o-transform: rotate(90deg) scale(2);
}