CSS-在元素上添加变换而不删除现有的变换

Question

所以，我有一个这样的 div ：

<div class="rotate-90"></div>

和 CSS：

.rotate-90
{
    transform: rotate(90deg);
}

我想向这个div元素中再添加一个名为"scale-2"的class，代码如下：

```html

```

<div class="rotate-90 scale-2"></div>

.scale-2
{
    transform: scale(2);
}

但是当我尝试结合它们时，第二个类会覆盖第一个类，因此我只得到了一个缩放的div，而没有旋转。

那么，如何在不重复编写代码或组合类别代码的情况下结合变换呢？

谢谢 :)

- StyleSh1t

Answer 1

2022年更新

去年末，W3C发布了名为“CSS转换模块2级”的工作草案。

该规范新增了三维转换的新转换函数和属性，以及用于简单转换的便利函数。

它添加了“单独转换”：

• translate
• scale
• rotate

由于浏览器支持率超过85％，因此如果您的项目不必支持旧版浏览器，则应该可以使用它。

所以，从现在开始你应该能够这样做:

.rotate-90
{
    rotate: 90deg;
}

.scale-2
{
    scale: 2;
}

这里有一个不错的介绍视频：一种新的CSS转换方式！，由Kevin Powell制作。

---

原始回答：

Transform规则会被覆盖，就像任何其他规则一样。

但是您可以将转换组合在一个规则中：

.rotate-90.scale-2 {
    transform: rotate(90deg) scale(2);
}

如果合并这两个类不是你的愿望（我完全不理解，但尊重），而且如果你的框架只有这两个效果，那么你可以使用缩放（zoom）来做比例规则。

.scale-2 {
    zoom: 2;
}

- Sebastian G. Marinescu

---

他/她不想合并这些属性。 - Richa

@Era 没有其他方法可以做到这一点。此外，OP已经结合了类：class="rotate-90 scale-2" - 那么为什么他/她不应该相应地正确地调整他们的CSS呢？ - Sebastian G. Marinescu

@SebastianG.Marinescu，我正在开发一个小型的CSS框架，因此我想创建类并在需要时使用它们。我不希望我的框架覆盖其他代码或其他代码覆盖我的框架代码。我也不想组合类，我希望每个类都能做它应该做的事情。 - StyleSh1t

@StyleShit：我理解你的意思。但你需要明白，在transform属性的情况下，这是不可能的。你要么只使用transform来实现一个效果，要么为每种情况/组合正确地组合所有的transform效果。如果你的框架只有这两个效果，那么你可以尝试在scale-2类中使用zoom: 2。 - Sebastian G. Marinescu

@StyleShit：你理解错了——将这些类组合到一个规则中并不是“覆盖其他代码”，而是承认和纠正你的规则。 - Sebastian G. Marinescu

@StyleSh1t 规格已更新，你的愿望已经实现了... - Sebastian G. Marinescu

Answer 2

因为您再次使用了transform属性，覆盖了之前的属性。

您可以像这样在一个transform中同时使用它们。

.rotate-90.scale-2 {
    transform: rotate(90deg) scale(2);
}

Transform属性应该使用前缀，以便在所有浏览器中都能正常工作，像这样：

.rotate-90.scale-2 {
    transform: rotate(90deg) scale(2);
    -moz-transform: rotate(90deg) scale(2);
    -ms-transform: rotate(90deg) scale(2);
    -webkit-transform: rotate(90deg) scale(2);
    -o-transform: rotate(90deg) scale(2);
}

- Gaurav Aggarwal

---

他/她不想合并这些属性。 - Richa

without writing the code twice or combining the classes codes? - Richa