css - 如何仅在正 x 方向缩放？

Question

我是动画新手。我使用 scalex() 为我的 div 区域设置动画，但它会在相应的 div 上产生双向缩放 onclick。I'我在下面添加了一个片段。

document.getElementById("match").addEventListener("click",function(){
    document.getElementById("match").classList.add("anim");
});

#match{
 height:100px;
  width:100px;
  background-color:red;
  }

.anim{
    animation : scale 5s linear 1;
}

@keyframes scale{
    0%{
        transform: scaleX(1);
    }
    50%{
      transform: scaleX(1.5);
    }
    100%{
        transform: scaleX(2);
    }
}

<div id="match"> </div>

在上面的代码中，我试图实现一个仅在正 x 方向上缩放的 div 区域。如何实现它？

Answer 1

将 transform-origin 的值设置为 left，这样框的左边缘就保持固定。

document.getElementById("match").addEventListener("click", function() {
  document.getElementById("match").classList.add("anim");
});

#match {
  height: 100px;
  width: 100px;
  background-color: red;
}
.anim {
  animation: scale 5s linear 1;
  transform-origin: left;
}
@keyframes scale {
  0% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(1.5);
  }
  100% {
    transform: scaleX(2);
  }
}

<div id="match"></div>