CSS -在不删除现有元素的情况下将转换添加到元素

Question

所以，我有一个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，而不是旋转的。那么，在不编写两次代码或组合类代码的情况下，如何组合转换呢？

谢谢:)

Answer 1

更新2022

去年年底，W3C发布了"CSS转换模块级别2“的工作草案。

该规范为三维转换添加了新的转换函数和属性，为简单转换添加了方便函数。

它增加了"个别变换"：

• 翻译
• 规模
• 旋转

由于浏览器-支持超过85%，它应该是可用的，如果您的项目不需要支持旧浏览器。

所以从现在开始你应该可以这样做：

.rotate-90
{
    rotate: 90deg;
}

.scale-2
{
    scale: 2;
}

这是一个很好的介绍-视频："一种新的方法来进行CSS转换！“由凯文鲍威尔。

原始答案：

转换-规则被重写，就像任何其他规则一样。

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

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

如果合并这两个类不是您的愿望(我完全不理解，但尊重)，如果您的框架只有这两个效果，那么您可以使用缩放作为缩放规则：

.scale-2 {
    zoom: 2;
}

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