如何应用多个变换声明到一个元素？ [英] How can I apply multiple transform declarations to one element?

问题描述

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

I have an element with two classes, one called "rotate" that will rotate the element 360 degrees and another called "doublesize" that will scale the element 2x its normal size:

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

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

.doublesize {
    transform: scale(1);
}

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

http://jsfiddle.net/Sbw8W/

我猜这不行，因为类重写了对方的转换属性？

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

我知道我可以很容易地在一个CSS规则中这样做：

I know that I could easily do this in one CSS rule like:

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

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

但我想能够将每个类别与其他类别分开可能。

But I would like to be able to apply each class separately from the other if it is possible.

推荐答案

我猜这是不工作，因为类重写了彼此的 transform 属性？

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

Correct. This is an unfortunate limitation as a side-effect of how the cascade works.

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

You will have to specify both functions in a single transform declaration. You could simply chain both class selectors together instead of creating a new class for a combined transform:

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

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

...但你可以看到，问题出在 transform 属性，而不是在选择器中。

... but as you can see, the issue lies in the transform property rather than in the selector.

在转化级别2中纠正，其中每个转化已提升为其自身的属性，允许您简单地通过单独声明它们来组合变换，就像CSS属性的任何其他组合一样。这意味着您只需这样做：

This is expected to be rectified in Transforms level 2, where each transform has been promoted to its own property, which would allow you to combine transforms simply by declaring them separately as you would any other combination of CSS properties. This means you would be able to simply do this:

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

.rotate:hover {
    rotate: 360deg;
}

.doublesize:hover {
    scale: 2;
}

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

... and take advantage of the cascade rather than be hindered by it. No need for specialized class names or combined CSS rules.

这篇关于如何应用多个变换声明到一个元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！