我有一个包含两个类的元素，一个称为“旋转”，它将旋转元素360度，另一个称为“双倍化”，将元素缩放为其正常大小2x：
.rotate {
transform: rotate(0deg);
}
.rotate:hover {
transform: rotate(360deg);
}
.doublesize {
transform: scale(1);
}
.doublesize:hover {
transform: scale(2);
}
我猜这是不行的，因为这些类覆盖对方的转换属性？
我知道我可以轻松地在一个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
transformproperty?
正确。这是一个不幸的限制，作为级联工作的副作用。
您将必须在单个转换声明中指定两个函数。您可以简单地将两个类选择器链接在一起，而不是为组合变换创建一个新类：
.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规则。
