Jquery transform translate and rotate эффект
Как сделать такой эффект для блоков?
!!Это не реклама, нужна помощь в таком эффекте
в конце блок получает такой стиль
style="transform: translate(-670px, -1005px) rotate(-1.0472rad); display: none;"
Ответы (1 шт):
Автор решения: Stepan Kasyanenko
→ Ссылка
Добиться данного эффекта можно с помощью комбинации css transform и 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>