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

How can I apply multiple transform declarations to one element?

提问by Ash

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”，它将元素旋转 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/

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

我猜这不起作用，因为这些类覆盖了彼此的transform属性？

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

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

.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.

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

回答by BoltClock

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

我猜这不起作用，因为这些类覆盖了彼此的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 transformdeclaration. You could simply chain both class selectors together instead of creating a new class for a combined transform:

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

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

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

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

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

---

---

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:

这预计会在 Transforms 级别 2 中得到纠正，其中每个转换都被提升为它自己的属性，这将允许您通过单独声明它们来组合转换，就像您对任何其他 CSS 属性组合一样。这意味着您可以简单地执行以下操作：

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

.rotate:hover {
    rotate: 360deg;
}

.doublesize:hover {
    scale: 2;
}

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

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

回答by enguerranws

You can surely combine multiple animation, but not by combining CSS classes. See the first answer here : combining multiple css animations into one overall animation

您当然可以组合多个动画，但不能组合 CSS 类。请参阅此处的第一个答案：将多个 css 动画组合成一个整体动画

The first part tells you how to combine animation with CSS with some parameters (delay, duration) :

第一部分告诉你如何将动画与 CSS 结合一些参数（延迟、持续时间）：

.outside.animate {
   -webkit-animation-delay: 0s, .5s, .5s;
   -webkit-animation-duration: 500ms, 1000ms, 1000ms;
   -webkit-animation-name: button-bounce, rotate, skyblue;
}

For sure, you firstly need to define your animations.

当然，您首先需要定义您的动画。

回答by Mike Gledhill

You can't do this using just CSS, but if you don't mind using some jQuery, you can attach this effect using some jQuery:

你不能只使用 CSS 来做到这一点，但如果你不介意使用一些 jQuery，你可以使用一些 jQuery 附加这个效果：

var $elem = $('.cssDropPinImage');
$({ deg: 0 }).animate({ deg: 359 }, {
    duration: 600,
    step: function (now) {
        var scale = (2 * now / 359);
        $elem.css({
            transform: 'rotate(' + now + 'deg) scale(' + scale + ')'
        });
    }
});

Hope this helps other readers, facing the same problem.

希望这可以帮助其他读者，面临同样的问题。

回答by Temani Afif

Using CSS variables you can have this separation. The idea is to chain as many transformation as you want inside the element using CSS variables then later you update each variable individually:

使用 CSS 变量可以实现这种分离。这个想法是使用 CSS 变量在元素内部链接尽可能多的转换，然后单独更新每个变量：

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transform:
    /* I prepared 3 placeholder so we can chain 3 transformation later */
    var(--t1,translate(0)) /* we need a fallback value, we consider a null transform*/
    var(--t2,translate(0)) 
    var(--t3,translate(0));
}

.transitionease {
  transition: all 1s ease;
}

.transitionease:hover {
  transition: all 3s ease;
}

.rotate {
  --t1: rotate(0deg);
}

.rotate:hover {
  --t1: rotate(360deg);
}

.doublesize {
  --t2: scale(1);
}

.doublesize:hover {
  --t2: scale(2);
}

<div class="transitionease doublesize rotate "></div>