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

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