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

如果组合这两个类不是你的愿望（我完全不理解，而是尊重），如果你的框架只有这两种效果，那么你可以使用缩放

的缩放

.scale-2 {
    zoom: 2;
}

Answer 2

因为您再次使用transform属性并且重写前一个属性。

您可以在一个转换中使用这两个

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

转换属性应与前缀一起使用，以使其适用于所有类似的浏览器

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

CSS - 将变换添加到元素而不删除现有元素

2 个答案: