css - 在多个地方设置 CSS 变换

Question

有没有办法在多个地方设置样式transform: translateX(100px) translateY(200px) rotate(100deg) scale(1.5)？例如，CSS 中有这些行:

.translate-x {
    transform: translateX(100px);
}

.translate-y {
    transform: translateY(200px);
}

.rotate {
    transform: rotate(100deg)
}

.big {
    transform: scale(1.5);
}

然后，我想在 HTML 中使用这些类来组合 transform。

<div class="translate-x rotate big"></div>
<div class="translate-y big"></div>
...

问题是样式没有合并，但最后一个会覆盖其他。

我所知道的唯一方法是组合所有类。但是有很多组合...

.translate-x.translate-y {
    transform: translateX(100px) translateY(200px);
}

.translate-x.translate.y.big {
    transform: translateX(100px) translateY(200px) scale(1.5);
}

...

Answer 1

不幸的是，你做不到。 transform 的语法如下，

transform: none|transform-functions|initial|inherit;

因此，当您在 HTML 元素上调用多个类时，只会应用 CSS 中声明的最后一个 class。 (class 顺序在 HTML 中无关紧要)

您能做的最好的事情是将 CSS 预处理器与一个函数一起使用，该函数将生成在一个声明中调用的这些转换函数的字符串，这样它们就不会被覆盖。