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

我有一个包含两个类的元素，一个称为“旋转”，它将旋转元素360度，另一个称为“双倍化”，将元素缩放为其正常大小2x：

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

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

.doublesize {
    transform: scale(1);
}

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

http://jsfiddle.net/Sbw8W/

我猜这是不行的，因为这些类覆盖对方的转换属性？

我知道我可以轻松地在一个CSS规则中做到这一点：

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

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

但是，如果可能，我希望能够将每个类别与另一类分开。

解决方法

I’m guessing this does not work because the classes override each other’s transform property?

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

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

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

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

…但是您可以看到，问题在于转换属性而不是选择器。

预计在Transforms 2级将其中的每个变换提升为its own 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规则。