Question

我有一个带有两个类的元素，一个叫做“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/

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

我知道我可以轻松地在一个CSS规则中执行此操作，如：

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

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

但是如果可能的话，我希望能够将每个班级与其他班级分开来。

Answer 1

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

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

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

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

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

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

预计这将在变换级别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规则。

Answer 2

使用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>

Answer 3

您可以合并多个动画，但不能组合CSS类。请参阅此处的第一个答案：combining multiple css animations into one overall animation

第一部分讲述如何将动画与CSS结合使用一些参数（延迟，持续时间）：

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

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

Answer 4

你不能只使用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 + ')'
        });
    }
});

希望这有助于其他读者，面对同样的问题。

Answer 5

这个问题暗示了悬停时的缩放和旋转动画。解决此问题的另一种实用方法是重新排列 HTML 中的元素并将单独的转换应用于父元素和子元素，仅响应父元素上的悬停。

看起来像这样：

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

.doublesize {
   transition: transform 1s ease;
}

.rotate {
   width: 100px; 
   height: 100px;
   background-color: red;   
   transition: transform 1s ease;
}

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

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

http://jsfiddle.net/n38csxy1/4/

我知道这与最初的设置相比有很大的飞跃，但我希望这个观点仍然对某人有所帮助。

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

5 个答案: