Back to Snippets

Credit Card Flip Animation CSS

Wow your users during checkout with a rotating credit card. When the user hovers over the card (or focuses on CVV), it flips over to show the back, which provides immediate visual feedback and looks very professional.

523

#css

#credit card

#payment

#flip animation

#3d

#form

#ui

/HTML *CSS ()JS Output Live Updates

* {
  box-sizing: border-box;
}
.flip-container {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  perspective: 1000px;
  width: 320px;
  height: 200px;
  margin: 0 auto;
}
.flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.flip-container:hover .flipper {
  transform: rotateY(180deg);
}
.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 16px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.2);
  color: white;
  padding: 20px;
  box-sizing: border-box;
}
.front {
  background: linear-gradient(135deg, #1e293b, #0f172a);
}
.back {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  transform: rotateY(180deg);
}
/* Front Details */
.chip {
  width: 40px;
  height: 30px;
  background: #fbbf24;
  border-radius: 5px;
  margin-bottom: 40px;
}
.card-num {
  font-size: 1.4rem;
  letter-spacing: 2px;
  font-family: monospace;
  margin-bottom: 25px;
}
.card-name {
  text-transform: uppercase;
  font-size: 0.8rem;
}
.card-exp {
  position: absolute;
  bottom: 20px;
  right: 80px;
  font-size: 0.9rem;
}
.card-logo {
  position: absolute;
  bottom: 20px;
  right: 20px;
  font-weight: 800;
  font-style: italic;
  font-size: 1.2rem;
}
/* Back Details */
.magnetic-strip {
  background: #000;
  height: 40px;
  width: 100%;
  position: absolute;
  left: 0;
  top: 20px;
}
.cvv-box {
  background: #fff;
  color: #000;
  width: 100%;
  margin-top: 60px;
  padding: 10px;
  border-radius: 4px;
  text-align: right;
  font-family: monospace;
  position: relative;
}
.cvv-box span {
  position: absolute;
  top: -20px;
  right: 0;
  color: white;
  font-size: 0.7rem;
}

Credit Card Flip Animation CSS

Share Code Snippet