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

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 中得到纠正，其中每个转换都已提升为其自己的属性，这将允许您通过单独声明转换来组合转换，就像您声明任何其他 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;
  display: inline-block;
  background-color: red;
  transform:
    /* I prepared 3 placeholder so we can chain 3 transformation later */
    var(--t1,) /* we need "nothing" as fallbak*/
    var(--t2,) 
    var(--t3,);
}
.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"></div>
<div class="transitionease doublesize rotate "></div>
<div class="transitionease doublesize"></div>

Answer 3

您当然可以组合多个动画，但不能通过组合CSS类。在这里看到第一个答案：将多个css动画组合成一个整体动画

第一部分告诉您如何将动画与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，你可以附加这个效果：

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

body {
  padding: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://via.placeholder.com/40" class="cssDropPinImage">

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/

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