<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%;
transform-style: preserve-3d;
transform-style: preserve-3d;
transform-origin: center;
transform: scale(1) translate3D(0, 0, 0);
transform: scale(1) translate3D(0, 0, 0);
border-radius: 20px;
border-radius: 20px;
z-index: 0;
.card-front,
.card-back {
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
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;
}
::placeholder {
color: white;
opacity: 0.5;
}
::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
This Pen doesn't use any external CSS resources.