PdrNMo

index.pug

button(type="button" onclick="Toggle();" style="color: red; font-size: 32px") test

.wrapper
  #box lorem ipsum dolor sit amet A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

pdrnmo.markdown

PdrNMo

A Pen by Xeltica on CodePen.

License.

script.js

const box = document.getElementById("box");

function Toggle() {
  box.classList.toggle("away");
}

style.scss

.wrapper {
  width: 8rem;
  perspective: 800px;
  transform-style: preserve-3d;
  position: relative;
  height: 100vh;
}

#box {
  display: block;
  width: 4rem;
  left: 2rem;
  height: auto;
  top: 64px;
  background-color: white;
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 0 1rem;
  position: absolute;
  transition: all 0.2s ease;
  
  &.away {
    transform: translateY(-300px) translateZ(-600px);
    z-index: -100px;
  }
  
}