Question

我在CSS中缩放有问题。 div.container有transform: scale(0.1)，因此，由于字体大小正常，此元素中的h1为transform: scale(10)。

悬停后，div.container有transform: scale(0.5)和h1 transform: scale(2)。一切都是动画的（transition: all 1s ease-in-out）。

然而，h1的动画并不像div.container的动画一样快，所以在悬停之后，h1在动画开始时非常大，然后快速缩小

我认为因为h1应该有倒置缓和而发生这种情况。但是什么缓和被转换为ease-in-out？或者其他地方的问题是什么？

注意：我无法仅缩放div.image。这段代码只是一个例子。我必须缩放div.container。

＆＃13;

.container, .title {
  transition: all 1s ease-in-out;
}

.image {
  background-image: url(https://www.w3schools.com/css/trolltunga.jpg);
  background-size: 100% auto;
  background-repeat: no-repeat;
  height: 300px;
  width: 800px;
}

.container {
  transform: scale(0.1);
}

.title {
  margin: 0;
  text-align: center;
  padding-top: 1rem;
  transform: scale(10);
}

.container:hover {
  transform: scale(0.5);
}

.container:hover .title {
  transform: scale(2);
}

＆＃13;

<div class="container">
   <div class="image">
   
   </div>
   <h1 class="title">Title</h1>
</div>

＆＃13;

Answer 1

我发现它不适用于线性缓和。所以，问题不在于缓和。

＆＃13;

.container, .title {
  transition: all 1s linear;
}

.image {
  background-image: url(https://www.w3schools.com/css/trolltunga.jpg);
  background-size: 100% auto;
  background-repeat: no-repeat;
  height: 300px;
  width: 800px;
}

.container {
  transform: scale(0.1);
}

.title {
  margin: 0;
  text-align: center;
  padding-top: 1rem;
  transform: scale(10);
}

.container:hover {
  transform: scale(0.5);
}

.container:hover .title {
  transform: scale(2);
}

＆＃13;

<div class="container">
   <div class="image">
   
   </div>
   <h1 class="title">Title</h1>
</div>

＆＃13;

变换容器尺度和反转儿童变换规模

1 个答案: