패럴랙스 뎁스 카드

<div class="pc" id="pc">
  <div class="ly bgl"></div>
  <div class="ly midl"><div class="mnt"></div></div>
  <div class="ly fgl"><div class="fg1"></div><div class="fg2"></div></div>
</div>

body{background:#0a0a12}
.pc{position:relative;width:min(90%,340px);height:min(85%,190px);border-radius:16px;overflow:hidden;
  box-shadow:0 24px 50px rgba(0,0,0,.5)}
.ly{position:absolute;inset:-10%;transition:transform .05s linear}
.bgl{background:linear-gradient(180deg,#274b8a 0%,#1a2f5c 60%,#0f1730 100%)}
.midl .mnt{position:absolute;left:-5%;right:-5%;bottom:0;height:46%;
  background:linear-gradient(160deg,#3c5fa8,#22366b);clip-path:polygon(0 100%,0 55%,20% 30%,38% 58%,55% 20%,72% 50%,100% 35%,100% 100%)}
.fgl .fg1{position:absolute;left:6%;bottom:0;width:30%;height:60%;background:#0c1226;border-radius:12px 12px 0 0}
.fgl .fg2{position:absolute;right:10%;bottom:0;width:22%;height:44%;background:#141b34;border-radius:10px 10px 0 0}

const bg=document.querySelector('.bgl'), mid=document.querySelector('.midl'), fg=document.querySelector('.fgl');
let t=0;
function frame(){
  t+=0.02;
  const s=Math.sin(t);
  bg.style.transform='translateX('+(s*4)+'px)';
  mid.style.transform='translateX('+(s*14)+'px)';
  fg.style.transform='translateX('+(s*30)+'px)';
  requestAnimationFrame(frame);
}
frame();