如何将多个转换声明应用于一个元素？

一尘不染

如何将多个转换声明应用于一个元素？

css

我有一个包含两个类的元素，一个叫做“ rotate”，它将旋转元素360度，另一个叫做“ doublesize”，它将元素放大两倍于其正常大小：

.rotate {
    transform: rotate(0deg);
}

.rotate:hover {
    transform: rotate(360deg);
}

.doublesize {
    transform: scale(1);
}

.doublesize:hover {
    transform: scale(2);
}

我猜这是行不通的，因为这些类会覆盖彼此的transform属性？

我知道我可以很容易地在一条CSS规则中做到这一点，例如：

.doublerotatesize {
    transform: scale(1) rotate(0deg);
}

.doublerotatesize:hover {
    transform: scale(2) rotate(360deg);
}

但是我希望能够在可能的情况下分别应用每个类。

阅读 262

2020-05-16

共1个答案

一尘不染

我猜这是行不通的，因为这些类会覆盖彼此的transform属性？

正确。作为级联工作方式的副作用，这是一个不幸的局限。

您将必须在一个transform声明中指定两个函数。您可以简单地将两个类选择器链接在一起，而不是为组合的转换创建新类：

.doublesize.rotate {
    -webkit-transform: scale(1) rotate(0deg);
}

.doublesize.rotate:hover {
    -webkit-transform: scale(2) rotate(360deg);
}

…但是正如您所看到的，问题出在transform属性而不是选择器中。

预计将在Transforms级别2中对此进行纠正，在该级别中，每个变换都已提升为自己的property，这将使您可以像单独组合CSS属性一样简单地声明它们来组合变换。这意味着您将能够简单地做到这一点：

/* Note that rotate: 0deg and scale: 1 are omitted
   as they're the initial values */

.rotate:hover {
    rotate: 360deg;
}

.doublesize:hover {
    scale: 2;
}

…并利用级联而不是受其阻碍。不需要专门的类名或组合的CSS规则。

2020-05-16