<div class="container">
  <div class="card">
    <div class="card-front">
      <div class="bg-img"></div>

      <form>
        <div class="title">
          Billing Information
        </div>

        <div class="chip"></div>

        <div class="cc-num">
          <input type="text" placeholder="1234" id="cc-num1" maxlength="4" tabindex="0">
          <input type="text" placeholder="5678" id="cc-num2" maxlength="4" tabindex="0">
          <input type="text" placeholder="1234" id="cc-num3" maxlength="4" tabindex="0">
          <input type="text" placeholder="1234" id="cc-num4" maxlength="4" tabindex="0">
        </div><!-- .cc-num -->

        <label class="exp-label" for="exp-date1">VALID THRU</label>

        <div class="div-exp">
          <input name="exp-date1" type="text" placeholder="01" class="cc-exp" id="month" maxlength="2" tabindex="0">
          <span class="slash">/</span>
          <input type="text" name="exp-date2" placeholder="16" class="cc-exp" id="year" maxlength="2" tabindex="0">
        </div><!-- .div-exp -->

        <div class="cardholder">
          <input type="text" placeholder="YOUR NAME" class="cc-name" maxlength="36">
        </div><!-- .cardholder -->
      </form>
    </div><!-- .card-front -->

    <div class="card-back">

    </div> <!-- .card-back -->
  </div><!-- .card -->
</div><!-- .card-container -->

<button id="toggle-flip">Click To Flip Over</button>
@import url("https://fonts.googleapis.com/css?family=Play");
@import url("https://fonts.googleapis.com/css?family=Open+Sans");

* {
  padding: 0;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/430478/wood.jpeg");
  background-size: cover;
  background-repeat: no-repeat;
}

.container {
  width: 500px;
  height: 300px;
  left: 50%;
  top: 50%;
  position: absolute;
  margin: auto;
  perspective: 800px;
  transform: translateX(-50%) translateY(-50%);
  z-index: 1;
}

.card {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transform-origin: center;
  -webkit-transform: scale(1) translate3D(0, 0, 0);
  transform: scale(1) translate3D(0, 0, 0);
  -webkit-border-radius: 20px;
    border-radius: 20px;
  z-index: 0;
 
  .card-front,
  .card-back {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    box-shadow: -3px 4px 7px #333333;
    z-index: 0;
  }
  
  .card-front {
  }
  
  .card-back {
    transform: rotateY(180deg) translateZ(1px);
    background: rgb(42, 46, 82);
    
    &:before {
      display: block;
      content: '';
      height: 40px;
      width: 100%;
      position: absolute;
      top: 20px;
      left: 0;
      background: black;
    }
  }
  
  &.flipped {
    animation-name: flip;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  0% {
    transform: rotateY(0deg) scale(1) translateX(0px);
  }
  
  50% {
    transform: rotateY(-90deg) scale(1) translateX(250px);
  }
  
  100% {
    transform: rotateY(-180deg) scale(1) translateX(0px);
  }
}

.bg-img{
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/430478/city.jpg);
  background-size: cover;
  filter: blur(2px);
  transform: scale(1.1);
  z-index: -1;
  backface-visibility: hidden;
}

.title {
  font-family: "Open Sans";
  font-size: 1.4em;
  color: white;
  position: absolute;
  right: 25px;
  top: 10px;
}

.chip {
  width: 74px;
  height: 67px;
  transform: translateY(-1px);
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/430478/chip.jpg);
  background-size: 124.5%;
  background-position: center;
  border-radius: 10px;
  position: absolute;
  top: 95px;
  left: 40px;
}

.cc-num{
  position: absolute;
  left: 50%;
  top: 167px;
  transform: translateX(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0px 38px;
  box-sizing: border-box;
}

input {
  background-color: rgba(0,0,0,0);
  border: none;
  color: white;
  font-family: "Play";
  text-shadow: -2px -2px 2px black;
  width: 90px;
}

.cc-num input {
  font-size: 2.2em;
}

::-moz-placeholder {
  color: white;
  opacity: 0.5;
}

::-webkit-input-placeholder {
  color: white;
  opacity: 0.5;
}

.exp-label {
  color: white;
  font-family: "Open Sans";
  width: 20px;
  font-size: 12px;
  position: absolute;
  left: 225px;
  top: 210px;
}

.cc-exp {
  font-size: 24px;
  width: 32px;
  padding-left: 3px;
}

.slash {
  font-size: 1.7em;
  font-family: "Play";
  color: white;
  text-shadow: -2px -2px 2px black;
  margin-left: 3px;
  margin-right: 0px;
}

.div-exp {
  position: absolute;
  top: 211px;
  left: 265px;
  width: 100px;
}

.cc-name {
  width: 100%;
  font-size: 1.6em;
}

.cardholder {
  position: absolute;
  top: 250px;
  left: 40px;
  width: 90%;
}

#toggle-flip {
  font-size: 1em;
  color: white;
  background: #0bc6e2;
  border: none;
  border-bottom: solid 3px darken(#0bc6e2, 15%);
  padding: 10px 20px;
  border-radius: 5px;
  position: absolute;
  top: calc(50% + 200px);
  left: 50%;
  transform: translateX(-50%);
  transition: background 0.3s ease-in-out;
  cursor: pointer;
  z-index: 0;
  
  &:hover {
    background: lighten(#0bc6e2, 5%);
  }
  
  &:focus {
    outline: none;
  }
  
  &:active {
    border-bottom: none;
    display: block;
    top: calc(50% + 203px);
  }
}

input {
  text-transform: uppercase;
}
View Compiled
// $('#cc-num1').focus();

// Automatically switch to the next input
$('.cc-num > input').on('keyup', function(event) {
  
  if ( $(this).val().length === this.maxLength ) {
    $(this).next('input').focus();
  }
});

$('#toggle-flip').on('click', function(event) {
  event.preventDefault();
 $('.card').toggleClass('flipped');
});

// TODO: Loop the animation
// TODO: Build form on the back of the card
// TODO: If tab or enter are pushed on the name input, flip to back
// TODO: Figure out issue with the text-shadow on the expiry date
// TODO: Animate box-shadows for more realistic feel
// TODO: Determine which credit card company the entered number is from and fade in the relevant logo
// TODO: Add reversed entered numbers on the back, to copy the embossment
// TODO: Add space for drawing signature
// TODO: Add inner-highlights on raised letters

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js