变换比例（）：当元素变小时悬停动画失败答案

【问题标题】：Transform scale(): Animation on hover fails when the element becomes smaller变换比例（）：当元素变小时悬停动画失败
【发布时间】：2019-04-20 00:25:31
【问题描述】：

我正在尝试使文本旋转 180 度并在悬停在其上时将其缩小（使用过渡），但是，随着元素变小，它会失去焦点，并且指针不再位于其上方，并且动画失败。

我正在想办法解决这个问题，但还没有找到解决方案。

这是 HTML：

<div class="aligner">
  <div class="titdiv">
    <h1 class="title1">Once upon a time..</h1>   </div>
</div>

这是 CSS：

.aligner{
  position: fixed;
  bottom:0px;
  left:0px;
  border:10px solid slateblue; 
  height: 100px;  
  display: flex;
  justify-content: center;
  align-items: center;
  color:#fff;
  text-transform: uppercase;
  font-family: Helvetica;
  width:calc(100% - 20px);
  background-color: #f07d86;
  transition:all 1s linear;
  border-radius:20px;
  transition:1s all;
}

.titdiv:hover{
  color:#333;
  transform:scale(.4) rotate(180deg); 
}
.titdiv{
  transition:1s all
}

.aligner:hover{
  background:#dcdcdc;
  border:1px solid transparent;
  width:100%; 
}

【问题讨论】：

将一个元素放在固定尺寸之外，悬停时旋转里面的元素

标签： css

【解决方案1】：

只需更改具有转换的 CSS 规则的选择器：

.aligner:hover .titdiv {...}

这就是说，当.aligner 元素悬停时，将tramsform 和颜色更改应用于.titdiv 元素。

.aligner{
  position: fixed;
  bottom:0px;
  left:0px;
  border:10px solid slateblue; 
  height: 100px;  
  display: flex;
  justify-content: center;
  align-items: center;
  color:#fff;
  text-transform: uppercase;
  font-family: Helvetica;
  width:calc(100% - 20px);
  background-color: #f07d86;
  transition:all 1s linear;
  border-radius:20px;
  transition:1s all;
}

.aligner:hover .titdiv{
  color:#333;
  transform:scale(.4) rotate(180deg); 
}
.titdiv{
  transition:1s all
}

.aligner:hover{
  background:#dcdcdc;
  border:1px solid transparent;
  width:100%; 
}

<div class="aligner">
  <div class="titdiv">
    <h1 class="title1">Once upon a time..</h1>   </div>
</div>

【讨论】：