<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
    <link rel="stylesheet" href="https://pattern.kivan-works.com/fonts/kredit.css">
  </head>
  <body class="active">
    <div class="floating">
      <div class="card_body">
         <div class="sp_center svg"></div>
        <div class="logo svg"></div>
        <div class="paywave svg"></div>
        <div class="chips svg"></div>
        <div class="card_no text">
          1234-5678-9012-4610
        </div>
        <div class="valid text">
          VALID <br> THUR
        </div>
         <div class="valid_date text">
         12/20
        </div>
        <div class="holder text">RAJAN BAJAJ</div>
        <div class="mastercard_icon svg"></div>
      </div>
    </div>
  </body>
</html>
* {
    background-repeat: no-repeat;
}

html {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

body {
    height: 100%;
    display: flex;
    background: #1c182f;
}

.card_body {
    padding: 0.75rem 1.75rem;
  
}
.active .floating:before{
  
}
.floating:before{
  font-family:'Quicksand';
  content:"Move your mouse to see me in action!";
  width:100%;
  text-align:center;
  font-size:0.8rem;
  opacity: 0.2;
  position:absolute;
  top: 16px;
  
  transition:300ms;
  color: #fff;
}
.floating {
    font-family: Inconsolata;
  
    margin: auto;
    width: 452px;
    height: 280px;
  margin-top: 60px;
    box-shadow: -9px 8.7px 40px rgba(0, 0, 0, 0.7);
    font-size: 18px;
    border-radius: 8px;
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    background: url("https://lh3.googleusercontent.com/-PRXm_oqt2wQ/XIF7MeON8qI/AAAAAAAA9g4/JJU_b-g4KOQ6J8L2kqf14iqVEPM5yiWmwCK8BGAs/s0/2019-03-07.png");
  background-repeat: no-repeat;
    transform:rotateX(17deg) rotateY(18deg);
}

.logo {
    height: 60px;
    position: relative;
    top: 16px;
    transform: translateZ(30px);
    text-shadow: 0 0 5px rgba(0, 0, 0, .2);
    margin: 0;
    font-weight: normal;
    filter: drop-shadow(-6.4px 6.2px 8px rgba(0, 0, 0, .6));
    z-index: 10;
    background-image: url("https://lh3.googleusercontent.com/-7vu2mmaljlg/XIF7forsYLI/AAAAAAAA9hA/-ZsPbz1VQm8r3jgsTeRgOpL3cEVr-UvPACK8BGAs/s0/2019-03-07.png");
  background-size: 60px;

}

.chips {
    margin-top: 17px;
    margin-left: -1px;
    height: 70px;
    width: 80px;
    transform: translateZ(25px);
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='50px' x='0px' y='0px' viewBox='0 0 40 40' style='enable-background:new 0 0 40 40;' xml:space='preserve'%3E%3Cg id='surface1'%3E%3Cpath fill='%23F5CE85' d='M8.9,34.5c-6.4,0.1-6.4,0.1-6.4-6.4V11.9c0-3.5-0.1-6.4,3.4-6.4h25.3c6.4,0,6.4,0,6.4,6.4v16.3 c0,6.4,0,6.4-6.4,6.4L8.9,34.5z'/%3E%3Cpath fill='%23967A44' d='M31.1,6C37,6,37,6,37,11.9v16.3c0,5.9,0,5.9-5.9,5.9H8.9c-5.9,0-5.9,0-5.9-6V11.9C3,8.2,2.7,6,6,6H31.1 M31.1,5H9.2C2.3,5,2,5,2,11.9v16.3C2,35,2,35,8.9,35h22.3c6.9-0.1,6.9-0.1,6.9-6.9V11.9C38.1,5,38.1,5,31.1,5z'/%3E%3Cpath fill='%23967A44' d='M29,35c-3.3,0-6-2.7-6-6s2.7-6,6-6h8.5v1H29c-2.8,0-5,2.2-5,5s2.2,5,5,5V35z'/%3E%3Cpath fill='%23967A44' d='M11,35v-1c2.8,0,5-2.2,5-5s-2.2-5-5-5H2.5v-1H11c3.3,0,6,2.7,6,6S14.3,35,11,35z'/%3E%3Cpath fill='%23967A44' d='M37.5,17H27c-2.2,0-4-1.8-4-4s1.8-4,4-4h2.1v1H27c-1.7,0-3,1.3-3,3s1.3,3,3,3h10.5V17z'/%3E%3Cpath fill='%23967A44' d='M28,16h1v7.5h-1V16z'/%3E%3Cpath fill='%23967A44' d='M13,17H2.5v-1H13c1.7,0,3-1.3,3-3s-1.3-3-3-3h-2.1V9H13c2.2,0,4,1.8,4,4S15.2,17,13,17z'/%3E%3Cpath fill='%23967A44' d='M11,16h1v7.5h-1V16z'/%3E%3C/g%3E%3C/svg%3E");
}

.paywave {
    transform: translateZ(30px);
    float: right;
    position: absolute;
    margin: 15px 5px;
    top: 0;
    right: 0;
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, .5));
    filter: drop-shadow(-6.4px 6.2px 8px rgba(0, 0, 0, .6));
    height: 50px;
    width: 50px;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='56' viewBox='0 0 46 56'%3E%3Ctitle%3EContactlessIndicator 000%3C/title%3E%3Cpath fill='none' stroke='%23FFF' stroke-width='6' stroke-linecap='round' d='m35,3a50,50 0 0,1 0,50M24,8.5a39,39 0 0,1 0,39M13.5,13.55a28.2,28.5 0 0,1 0,28.5M3,19a18,17 0 0,1 0,18'/%3E%3C/svg%3E");
}

.sp_center {
    height: 300px;
    width: 300px;
    position: absolute;
    top: 20%;
    left: 60%;
    transform: translateZ(5px);
    margin-left: -105px;
    z-index: 1;
    filter: drop-shadow(-6.4px 6.2px 8px rgba(0, 0, 0, .6));
    background-image: url("");
  background-size: 150px 150px;

}

.card_no {
    transform: translateZ(40px);
    font-family: kredit-front;
    font-weight: bold;
    font-size: 1.8rem;
    color: #FFF;
    position: absolute;
    letter-spacing: 3px;
    bottom: 90px;
    z-index: 2;
    text-shadow: 0 0 5px rgba(0, 0, 0, .8);
    text-shadow: -9px 8.7px 6px rgba(0, 0, 0, .8);
    width: calc(100% - 3.5rem);
    text-align: center;

}

.valid {
    position: absolute;
    bottom: 58px;
    color: #FFF;
    font-size: 0.58rem;
    left: 150px;
    text-shadow: 0 0 5px rgba(0, 0, 0, .8);
    text-shadow: -9px 8.7px 6px rgba(0, 0, 0, .8);
    transform: translateZ(30px);
}

.valid_date {
    position: absolute;
    font-family: kredit-front;
    font-size: 1.5rem;
    font-weight: bold;
    color: #FFF;
    text-shadow: 0 0 5px rgba(0, 0, 0, .8);
    text-shadow: -9px 8.7px 6px rgba(0, 0, 0, .8);
    bottom: 54px;
    left: 180px;
    z-index: 20;
    transform: translateZ(30px);
    letter-spacing: 2px;
}

.holder {
    position: absolute;
    font-family: kredit-front;
    font-size: 1.5rem;
    font-weight: bold;
    color: #FFF;
    text-shadow: 0 0 5px rgba(0, 0, 0, .8);
    text-shadow: -9px 8.7px 6px rgba(0, 0, 0, .8);
    bottom: 20px;
    left: 30px;
    z-index: 20;
    letter-spacing: 2px;
    transform: translateZ(50px);
}

.mastercard_icon {
    height: 85px;
    width: 95px;
    float: right;
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translateZ(30px);
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, .3));
   filter: drop-shadow(-6.4px 6.2px 8px rgba(0, 0, 0, .6));
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='75' height='75' viewBox='0 0 200 155' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:cc='http://creativecommons.org/ns%23' xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23'%3E%3Cmetadata%3E%3Crdf:RDF%3E%3Ccc:Work rdf:about=''%3E%3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E%3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage'/%3E%3Cdc:title/%3E%3C/cc:Work%3E%3C/rdf:RDF%3E%3C/metadata%3E%3Cg transform='translate(1565.7 -1106.8)'%3E%3Cg transform='matrix(3.1437 0 0 3.1437 -4835.7 -1027.6)'%3E%3Cg transform='matrix(1.25 0 0 -1.25 1102.5 727.74)'%3E%3Cpath d='m0 0v-0.103h0.095c0.021 0 0.039 5e-3 0.052 0.013 0.012 8e-3 0.019 0.022 0.019 0.039s-7e-3 0.03-0.019 0.038c-0.013 9e-3 -0.031 0.013-0.052 0.013zm0.096 0.072c0.049 0 0.087-0.011 0.114-0.033s0.04-0.052 0.04-0.09c0-0.032-0.01-0.058-0.032-0.079-0.021-0.02-0.051-0.033-0.091-0.038l0.126-0.145h-0.098l-0.117 0.144h-0.038v-0.144h-0.082v0.385zm-0.025-0.518c0.045 0 0.087 9e-3 0.125 0.026 0.039 0.017 0.073 0.04 0.102 0.069s0.052 0.063 0.069 0.103c0.016 0.039 0.025 0.081 0.025 0.126s-9e-3 0.087-0.025 0.126c-0.017 0.039-0.04 0.074-0.069 0.103s-0.063 0.052-0.102 0.069c-0.038 0.016-0.08 0.024-0.125 0.024s-0.088-8e-3 -0.127-0.024c-0.04-0.017-0.075-0.04-0.104-0.069s-0.052-0.064-0.068-0.103c-0.017-0.039-0.025-0.081-0.025-0.126s8e-3 -0.087 0.025-0.126c0.016-0.04 0.039-0.074 0.068-0.103s0.064-0.052 0.104-0.069c0.039-0.017 0.082-0.026 0.127-0.026m0 0.739c0.059 0 0.113-0.011 0.165-0.033 0.051-0.021 0.095-0.051 0.134-0.089 0.038-0.037 0.068-0.081 0.09-0.132 0.022-0.05 0.033-0.104 0.033-0.161s-0.011-0.111-0.033-0.161-0.052-0.094-0.09-0.132c-0.039-0.037-0.083-0.067-0.134-0.089-0.052-0.022-0.106-0.033-0.165-0.033-0.06 0-0.115 0.011-0.167 0.033s-0.097 0.052-0.135 0.089c-0.038 0.038-0.068 0.082-0.09 0.132s-0.033 0.104-0.033 0.161 0.011 0.111 0.033 0.161c0.022 0.051 0.052 0.095 0.09 0.132 0.038 0.038 0.083 0.068 0.135 0.089 0.052 0.022 0.107 0.033 0.167 0.033m-38.961 1.483c0 0.734 0.481 1.337 1.267 1.337 0.751 0 1.258-0.577 1.258-1.337s-0.507-1.337-1.258-1.337c-0.786 0-1.267 0.603-1.267 1.337m3.381 0v2.088h-0.908v-0.507c-0.288 0.376-0.725 0.612-1.319 0.612-1.171 0-2.089-0.918-2.089-2.193 0-1.276 0.918-2.193 2.089-2.193 0.594 0 1.031 0.236 1.319 0.612v-0.507h0.908zm30.684 0c0 0.734 0.481 1.337 1.267 1.337 0.752 0 1.258-0.577 1.258-1.337s-0.506-1.337-1.258-1.337c-0.786 0-1.267 0.603-1.267 1.337m3.382 0v3.765h-0.909v-2.184c-0.288 0.376-0.725 0.612-1.319 0.612-1.171 0-2.089-0.918-2.089-2.193 0-1.276 0.918-2.193 2.089-2.193 0.594 0 1.031 0.236 1.319 0.612v-0.507h0.909zm-22.795 1.38c0.585 0 0.961-0.367 1.057-1.013h-2.167c0.097 0.603 0.463 1.013 1.11 1.013m0.018 0.813c-1.224 0-2.08-0.891-2.08-2.193 0-1.328 0.891-2.193 2.141-2.193 0.629 0 1.205 0.157 1.712 0.585l-0.445 0.673c-0.35-0.279-0.796-0.437-1.215-0.437-0.585 0-1.118 0.271-1.249 1.023h3.101c9e-3 0.113 0.018 0.227 0.018 0.349-9e-3 1.302-0.813 2.193-1.983 2.193m10.964-2.193c0 0.734 0.481 1.337 1.267 1.337 0.751 0 1.258-0.577 1.258-1.337s-0.507-1.337-1.258-1.337c-0.786 0-1.267 0.603-1.267 1.337m3.381 0v2.088h-0.908v-0.507c-0.289 0.376-0.725 0.612-1.319 0.612-1.171 0-2.089-0.918-2.089-2.193 0-1.276 0.918-2.193 2.089-2.193 0.594 0 1.03 0.236 1.319 0.612v-0.507h0.908zm-8.509 0c0-1.267 0.882-2.193 2.228-2.193 0.629 0 1.048 0.14 1.502 0.498l-0.436 0.734c-0.341-0.245-0.699-0.376-1.093-0.376-0.725 9e-3 -1.258 0.533-1.258 1.337s0.533 1.328 1.258 1.337c0.394 0 0.752-0.131 1.093-0.376l0.436 0.734c-0.454 0.358-0.873 0.498-1.502 0.498-1.346 0-2.228-0.926-2.228-2.193m11.707 2.193c-0.524 0-0.865-0.245-1.101-0.612v0.507h-0.9v-4.176h0.909v2.341c0 0.691 0.297 1.075 0.891 1.075 0.184 0 0.376-0.026 0.568-0.105l0.28 0.856c-0.201 0.079-0.463 0.114-0.647 0.114m-24.341-0.437c-0.437 0.288-1.039 0.437-1.703 0.437-1.058 0-1.739-0.507-1.739-1.337 0-0.681 0.507-1.101 1.441-1.232l0.429-0.061c0.498-0.07 0.733-0.201 0.733-0.437 0-0.323-0.332-0.507-0.952-0.507-0.629 0-1.083 0.201-1.389 0.437l-0.428-0.707c0.498-0.367 1.127-0.542 1.808-0.542 1.206 0 1.905 0.568 1.905 1.363 0 0.734-0.55 1.118-1.459 1.249l-0.428 0.062c-0.393 0.052-0.708 0.13-0.708 0.41 0 0.306 0.297 0.489 0.795 0.489 0.533 0 1.049-0.201 1.302-0.358zm11.716 0.437c-0.524 0-0.865-0.245-1.1-0.612v0.507h-0.9v-4.176h0.908v2.341c0 0.691 0.297 1.075 0.891 1.075 0.184 0 0.376-0.026 0.568-0.105l0.28 0.856c-0.201 0.079-0.463 0.114-0.647 0.114m-7.749-0.105h-1.485v1.267h-0.918v-1.267h-0.847v-0.83h0.847v-1.905c0-0.969 0.376-1.546 1.45-1.546 0.394 0 0.848 0.122 1.136 0.323l-0.262 0.778c-0.271-0.157-0.568-0.236-0.804-0.236-0.454 0-0.602 0.28-0.602 0.699v1.887h1.485zm-13.577-4.176v2.621c0 0.987-0.629 1.651-1.643 1.66-0.533 9e-3 -1.083-0.157-1.468-0.743-0.288 0.463-0.742 0.743-1.38 0.743-0.446 0-0.882-0.131-1.223-0.62v0.515h-0.909v-4.176h0.917v2.315c0 0.725 0.402 1.11 1.023 1.11 0.603 0 0.908-0.393 0.908-1.101v-2.324h0.918v2.315c0 0.725 0.419 1.11 1.022 1.11 0.62 0 0.917-0.393 0.917-1.101v-2.324z' fill='%23FFFFFF'/%3E%3C/g%3E%3Cg transform='matrix(1.25 0 0 -1.25 1103.2 710.77)'%3E%3Cpath d='m0 0v0.61h-0.159l-0.184-0.419-0.183 0.419h-0.16v-0.61h0.113v0.46l0.172-0.397h0.117l0.172 0.398v-0.461zm-1.009 0v0.506h0.204v0.103h-0.52v-0.103h0.204v-0.506z' fill='%23f79410'/%3E%3C/g%3E%3Cpath d='m1080.6 714.05h-17.202v-30.915h17.202z' fill='%23ff5f00'/%3E%3Cg transform='matrix(1.25 0 0 -1.25 1064.5 698.59)'%3E%3Cpath d='m0 0c0 5.017 2.349 9.486 6.007 12.366-2.675 2.106-6.051 3.363-9.72 3.363-8.686 0-15.727-7.042-15.727-15.729s7.041-15.729 15.727-15.729c3.669 0 7.045 1.257 9.72 3.363-3.658 2.88-6.007 7.349-6.007 12.366' fill='%23eb001b'/%3E%3C/g%3E%3Cg transform='matrix(1.25 0 0 -1.25 1103.8 698.59)'%3E%3Cpath d='m0 0c0-8.687-7.041-15.729-15.727-15.729-3.669 0-7.045 1.257-9.721 3.363 3.659 2.88 6.008 7.349 6.008 12.366s-2.349 9.486-6.008 12.366c2.676 2.106 6.052 3.363 9.721 3.363 8.686 0 15.727-7.042 15.727-15.729' fill='%23f79e1b'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.tape{
  position:absolute;
  width:100%;
  height:60px;
  background:#446;
  margin-left:-1.75rem;
  top:50px;
 box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.7);
  transform:translateZ(-30px);
}
.sign_tape{
  position:absolute;
  width:100%;
  margin-left:-1.75rem;
  top:130px;
  background:#FFF;
  height:40px;
  transform:translateZ(-20px);
}
document.addEventListener('mousemove', function(event){
  let card_x = getTransformValue(event.clientX,window.innerWidth,40);
  let card_y = getTransformValue(event.clientY,window.innerHeight,40);
  let shadow_x = getTransformValue(event.clientX,window.innerWidth,10);
  let shadow_y = getTransformValue(event.clientY,window.innerHeight,10);
  let text_shadow_x = getTransformValue(event.clientX,window.innerWidth,10);
  let text_shadow_y = getTransformValue(event.clientY,window.innerHeight,10);
  $(".floating").css("transform","rotateX("+card_y+"deg) rotateY("+card_x+"deg)");
  $(".floating").css("box-shadow",-text_shadow_x+"px "+text_shadow_y+"px rgba(0, 0, 0, .5)");
  $(".svg").css("filter","drop-shadow("+-shadow_x+"px "+shadow_y+"px 4px rgba(0, 0, 0, .6))");
  $(".text").css("text-shadow",-text_shadow_x+"px "+text_shadow_y+"px 6px rgba(0, 0, 0, .8)");
});
function getTransformValue(v1,v2,value){
  return ((v1/v2*value-value/2)*1).toFixed(1);                        
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js