将另一个转换附加到现有属性

Question

有没有办法将新的转换属性附加到现有属性？

例如：我有一个div.animation，其定义如下

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

现在我想将transform: scale(1) 附加到同一个元素：

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

显然，如果我这样做，它将覆盖 translateX 和 translateY 属性。有什么方法可以在不覆盖的情况下附加另一个转换属性 - 与使用 border-left 和其他 CSS 属性的方法相同？

Answer 1

没有。 transform 没有子属性。

要附加多个转换，您需要重复前面的转换：

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

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