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

像其他规则一样，转换规则也被覆盖。

但是，您可以将转换合并为一个规则：

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

如果不希望将这两个类组合在一起（我完全不理解，但是请尊重），并且如果您的框架仅具有这两种效果，则可以将zoom用作比例尺：

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