主页 / 问题 / 1081079
Accepted
Aslero
Asked:2020-02-11 17:49:31 +0800 CST2020-02-11 17:49:31 +0800 CST

jquery transform 平移和旋转效果

  • 772

如何为块制作这样的效果？

!!这不是广告，我需要这个效果的帮助

在此处输入图像描述

最后块得到这种风格

style="transform: translate(-670px, -1005px) rotate(-1.0472rad); display: none;"
javascript

1 个回答

  1. Best Answer

    您可以使用 csstransform和transition.

    function changeClass(className) {
  square.classList.add(className);
}

square.addEventListener('transitionend', function() {
  square.classList.remove(...square.classList);
});
    #square {
  width: 200px;
  height: 200px;
  background-color: red;
}

.decline {
  transform: translate(-100%, -100%) rotate(-1.0472rad);
  transition: transform 1s ease;
}

.accept {
  transform: translate(100%, -100%) rotate(1.0472rad);
  transition: transform 1s ease;
}
    <div id="square"></div>
<button onclick="changeClass('decline')">decline</button>
<button onclick="changeClass('accept')">accept</button>

    • 2

相关问题