appending another transform to existing properties

Question

Is there any way to append new transform property to existing properties?

For example: I have a div.animation, which has the following definition

.animation {
    transform: translateX(-50%) translateY(-50%);
}

Now I want to append transform: scale(1) to the same element:

.animation.active {
    transform: scale(1);
}

Obviously if I do that, it will override translateX and translateY properties. Is there any way to be able to append another transform property without overriding - the same way as you can do it with border-left and other CSS attributes?

Answer 1

No. There's no subproperties to transform.

To append multiple transforms you'd need to repeat the previous ones:

.animation {
    transform: translateX(-50%) translateY(-50%);
}

.animation.active {
    transform: translateX(-50%) translateY(-50%) scale(1);
}