Question

我是动画新手。我使用scalex()为我的div区域设置动画，但在相应的div上生成两个方向onclick的缩放。我添加了一个片段下方。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何仅在正x方向上缩放？

1 个答案: