变换容器的比例和反转子的变换比例答案

【问题标题】：Transform scale of container and invert transform scale of child变换容器的比例和反转子的变换比例
【发布时间】：2017-12-03 12:20:55
【问题描述】：

我在 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。

.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);
}

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

【问题讨论】：

标签： css transform scale transition easing

【解决方案1】：

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

.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);
}

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

【讨论】：