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

我有一个具有两个类的元素，一个称为“rotate”，会将元素旋转 360 度，另一个称为“doublesize”，会将元素缩放为其正常大小的 2 倍：

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

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

.doublesize {
    transform: scale(1);
}

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

http://jsfiddle.net/Sbw8W/ http://jsfiddle.net/Sbw8W/

我猜这不起作用，因为这些类会覆盖彼此的transform财产？

我知道我可以通过一个 CSS 规则轻松地做到这一点，例如：

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

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

但如果可能的话，我希望能够将每个类与其他类分开应用。

我猜这不起作用，因为这些类会覆盖彼此的transform财产？

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

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

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

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

...但正如你所看到的，问题在于transform属性而不是选择器中。

这预计将在转换级别 2 中得到纠正，其中每个转换都已提升为自己的财产 https://www.w3.org/TR/css-transforms-2/#individual-transforms，这将允许您通过单独声明它们来组合变换，就像 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 规则。