CSS - 在不删除现有元素的情况下向元素添加变换[重复]答案

【问题标题】：CSS - add transform to element without removing the existing one [duplicate]CSS - 在不删除现有元素的情况下向元素添加变换[重复]
【发布时间】：2016-12-29 00:03:17
【问题描述】：

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

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

和css：

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

我想在 div 中添加另一个类，名为“scale-2”，如下所示：

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

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

但是当我尝试组合它们时，第二个类会覆盖第一个类，所以我只得到一个缩放的 div，而不是旋转的。那么，如何在不编写两次代码或组合类代码的情况下组合转换？

谢谢:)

【问题讨论】：

标签： html css transform

【解决方案1】：

像任何其他规则一样，转换规则会被覆盖。

但是，您可以将 transforms 组合在一个规则中：

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

如果组合这两个类不是你的愿望（我完全不明白，但尊重），如果你的框架只有这两个效果，那么你可以使用 缩放比例规则的缩放：

.scale-2 {
    zoom: 2;
}

【讨论】：

他/她不想组合属性。
@Era 没有其他方法可以做到这一点。此外，OP 已经在组合这些类：class="rotate-90 scale-2" - 那么他/她为什么不相应地正确地调整他们的 CSS 呢？
@SebastianG.Marinescu，我正在开发一个小型 css 框架，所以我想创建类并在需要时使用它们。我不希望我的 FW 覆盖其他代码或其他代码来覆盖我的 FW 代码。我也不想合并班级，我希望每个班级都做应该做的事情。
@StyleShit：我明白。但是您需要了解，在转换属性的情况下这是不可能的。您要么将transform 仅用于一种效果，要么针对可能存在的每种情况/组合正确组合所有您的变换效果。如果您的框架只有这两种效果，那么您可以尝试将zoom: 2 用于您的scale-2-class。
@StyleShit：你也弄错了——将类组合成一个规则并不是“覆盖其他代码”，而是承认并纠正你的规则。

【解决方案2】：

因为您再次使用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);
}

【讨论】：

他/她不想组合属性。
without writing the code twice or combining the classes codes?