在多个位置设置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);
}

...

- Vesmy

---

类似于这个 - https://dev59.com/fWgv5IYBdhLWcg3wNuJ5 - Stickers

Answer 1

很抱歉，您不能这样做。transform的语法如下所示，保留HTML标签：transform。

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

当你在HTML元素上调用多个类时，只有CSS中最后一个声明的class被应用。（在HTML中class顺序无关紧要）

最好的方法是使用带有函数的CSS预处理器，该函数将生成这些变换函数的字符串，以便它们不会被覆盖。

- Mr. Alien

Answer 2

正如上面的答案所述，目前仅使用 CSS 是不可能实现的。您需要使用 JavaScript 来为您应用它。

这里是一个小的 jQuery 示例：

$('.my-element').css({
'transform': 'translateX(100px) translateY(200px) rotate(100deg) scale(1.5)'
});

使用纯JS的方法如下：

var myElement = document.getElementsByClassName('my-element');
myElement.style.transform = 'translateX(100px) translateY(200px) rotate(100deg) scale(1.5)';

你应该能够使用以下三种方法之一来进行操作：

1. 事件监听器（最好使用事件委托）
2. 函数
3. 将脚本包含在页面主体底部，以便元素在转换之前呈现，以避免出现故障。

- Callat