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

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