<div id='app'>
  <div class='wrap vertical'>
    <div id='ball'></div>
  </div>
  <div class='wrap horizontal'>
  </div>
</div>

#app {
  perspective: 500;
  -webkit-perspective: 500;
}
.wrap {
  position: relative;
  margin: 0 auto;
}
.vertical {
  width: 400px;
  height: 415px;
  background-image: linear-gradient(150deg, rgb(164, 197, 199), rgb(45, 63, 72));
}
.horizontal {
  position: relative;
  width: 414px;
  top: -2px;
  height: 50px;
  background-image: linear-gradient(290deg, rgb(45, 63, 72), rgb(164, 197,199));
  perspective: 200;
  transform: rotateX(45deg);
}
#ball {
  display: block; 
  border-radius: 50%; 
  height: 30px; 
  position: absolute;
  top: 410px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px; 
  margin: 0; 
  background: radial-gradient(circle at 8px 12px, #60d8e4, #0a0a0a);
  box-shadow: 20px 0px 20px 0px rgba(0,0,0,0.6);
  z-index: 999;
}

const ball = document.getElementById('ball');

let x = 5;
let t = 1;
let a = 0.5
let v = 0;
let maxX = 400;

function drop() {
  ball.style.top = Math.floor(x) + 'px';
  if (x > maxX){
    v = -v;
  } else {
    v += a * t;  
  }
  x += v * t;
  window.requestAnimationFrame(drop);
}
window.requestAnimationFrame(drop);
//drop();