如何仅在正 x 方向缩放？

Question

我是 animation.and 的新手，我使用 scalex() 为我的 div 区域制作动画，但它会在相应的 [=27= 上产生双向 onclick 的缩放]在下面添加了一个片段。

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-direction.How 上缩放的 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>

如何仅在正 x 方向缩放？

How can scale in positive x direction only?

css

scale

css-transforms