Translate 3D text effect

Result

How to do it?

<div>
    <h1>Hi!</h1>
</div>

div {
    overflow: hidden;
}
  
h1 {
    font-size: 50px;
    display: block;
    transform: translate3d(0, 100%, 0);
    transition: transform 1000ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
}
  
h1.active {
    transform: translate3d(0, 0, 0);
}

let el = document.querySelector('h1');
let className = "active";

window.addEventListener('click', () => {
    if (el.className) {
        el.classList.remove(className);
    } else {
        el.classList.add(className);
    }
});