Join Us

Create 3D Credit or Debit Card with Flip effect HTML CSS JS

By /

Whether you’re designing a credit card UI or a sleek debit card animation, adding a 3D flip effect can take your interface from basic to professional. In this tutorial, we’ll show you how to build a 3D credit or debit card with flip effect using HTML, CSS, and JavaScript—without any external libraries.

This interactive credit/debit card UI component can display basic front-facing details, then flip to show sensitive information like card number, CVV and expiry date. Perfect for banking dashboards, e-wallet apps, and payment sections, this effect enhances user engagement while keeping performance lightweight.

HTML Markup

Our HTML structure for 3d card with flip effect is minimal, semantic, and easy to follow. We create a #card-container that sets perspective and a #card that contains both the front and back faces of the credit or debit card UI.

<div class="main-container">
    <div id="card-container">
        <div id="card">
            <div id="front">
                <div class="reflection"></div>
                <div class="type">PLATINUM</div>
                <div class="title-text">Bank Name</div>
                <div class="details">
                    <div class="name">Person Name</div>
                    <p id="hidden-number">1111 XXXX XXXX 1452</p>
                </div>
                <button id="show-btn">View Card Details</button>
                <div class="logo">MasterCard</div>
            </div>
            <div id="back">
                <div class="reflection"></div>
                <div id="chip">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <div class="title-text">Bank Name</div>
                <div class="details">
                    <div class="name">Person Name</div>
                    <p id="hidden-number">1111 1223 1223 1452</p>
                    <span id="cvv">CVV: 304</span>
                    <span id="valid-date"> Expiry: 02/30</span>
                </div>
                <button id="hide-btn">Hide Card Details</button>
                <div class="logo">MasterCard</div>
            </div>
        </div>
    </div>
</div>

This HTML sets the structure for an interactive credit or debit card layout. Use it as a foundation to simulate real-life card designs in your app.

Styling the Credit/Debit Card with CSS

The CSS is what makes this 3D card with flip effect shine. We use 3D transforms, transitions, and layered visual elements to replicate a realistic credit/debit card design.

.main-container {
    min-width: 400px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#card-container {
    width: 350px;
    height: 190px;
    perspective: 1000px;
    border-radius: 10px;
}

#card {
    width: 100%;
    height: 100%;
    color: white;
    transition: 1s;
    position: relative;
    border-radius: 10px;
    perspective: 1000px;
    font-family: calibri;
    transform-style: preserve-3d;
}

#front,
#back {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    border-radius: 10px;
    backface-visibility: hidden;
    background: linear-gradient(55deg, #0b0b0bfc 45%, rgb(25 25 25) 40%);
}

#back {
    transform: rotateY(180deg);
}

#front::after,
#front::before,
#back::after,
#back::before {
    content: '';
    width: 100%;
    height: 350px;
    position: absolute;
}

#front::before,
#back::before {
    left: -1%;
    transform: rotate(90deg);
    border-radius: 50% 95% 0% 100%;
    background: rgb(255 255 255 / 3%);
}

#front::after,
#back::after {
    height: 100%;
    right: -50%;
    top: -50%;
    border-radius: 100% 0 100% 80%;
    border: 1px solid rgb(239, 239, 239);
}

.reflection {
    width: 100%;
    height: 100%;
    position: absolute;
    transition: 1s;
}

.reflection::before {
    z-index: 0;
    top: 50%;
    content: '';
    left: -50%;
    height: 360px;
    position: absolute;
    background: #ffffff;
    transform: translate(-50%, -50%) rotate(50deg);
    box-shadow: 0px 0px 10px 10px #ffffff;
}

.type {
    top: 10%;
    margin-left: 15px;
    font-weight: bold;
    color: transparent;
    background: linear-gradient(62deg, #ffffff 0%, #000000 100%);
    position: relative;
    background-clip: text;
    -webkit-background-clip: text;
}

.title-text {
    position: absolute;
    right: 5%;
    top: 5%;
}

.details {
    position: relative;
    top: 35%;
    margin-left: 15px;
    font-size: 12px;
}

#hidden-number {
    margin-bottom: 10px;
}

#show-btn,
#hide-btn {
    position: absolute;
    bottom: 10%;
    left: 5%;
    border: none;
    color: white;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 20px;
    font-family: calibri;
    background: rgb(28, 28, 107);
}

.logo {
    position: absolute;
    font-size: 10px;
    width: 20%;
    height: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    bottom: 3%;
    right: 0%;
}

.logo::before,
.logo::after {
    content: '';
    position: absolute;
    width: 50%;
    aspect-ratio: 1/1;
    border-radius: 50%;
}

.logo::before {
    background: rgba(255, 0, 0, 0.525);
    left: 10%
}

.logo::after {
    background: rgba(255, 213, 0, 0.584);
    right: 10%;
}

.flipped {
    transform: rotateY(-180deg);
}

#chip {
    top: 10%;
    position: absolute;
    background: #e0ab89;
    width: 15%;
    height: 18%;
    border-radius: 5px;
    margin-left: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#chip span {
    position: absolute;
    background: #e0ab89;
    border: 1px solid black;
}

#chip span:nth-child(1) {
    height: 100%;
    width: 40%;
    border-top: none;
    border-bottom: none;
}

#chip span:nth-child(2) {
    height: 60%;
    width: 40%;
    left: 0;
    border-left: none;
    border-radius: 0 5px 5px 0;
}

#chip span:nth-child(3) {
    height: 60%;
    width: 40%;
    border-right: none;
    border-radius: 5px 0 0 5px;
    right: 0;
}

#chip span:nth-child(4) {
    width: 100%;
    border: none;
    border-bottom: 1px solid black;
}

#chip span:nth-child(5) {
    aspect-ratio: 1/1;
    width: 25%;
    border-radius: 2px;
}

.move {
    transform: translateX(700px);
}

#valid-date {
    margin-left: 15px;
}

Our CSS does the heavy lifting this card with flip effect:

  1. Depth & Perspective: #card-container applies perspective: 1000px, while #card uses transform-style: preserve-3d. This combo lets child faces rotate realistically in 3-D space.
  2. Front & Back Faces: Both faces are absolutely positioned, same size, and hide their reverse sides via backface-visibility: hidden. The back starts rotated 180deg so the two faces align perfectly.
  3. Glossy Reflection: A ::before pseudo-element spans the card, rotated and blurred to imitate a studio light sweeping across the surface. When the card flips, a .move class translates that reflection offscreen for a subtle parallax feel.
  4. Branding & Chip: The “MasterCard” logo is just two overlapping circles in warm color tones; the EMV chip is built from five nested <span>s and borders.

JavaScript to Handle Flip Interactions

The JavaScript is lightweight and efficient—perfect for toggling the 3D card with flip effect without libraries.

flip = () => {
    document.getElementById('card').classList.toggle('flipped')
    document.querySelector('#front .reflection').classList.toggle('move')
    document.querySelector('#back .reflection').classList.toggle('move')
}
document.getElementById('show-btn').addEventListener('click', flip)
document.getElementById('hide-btn').addEventListener('click', flip)

This enables the credit or debit card to flip when users want to see more information, then flip back to protect data—just like a physical card in your hand.

Use Cases for This Credit or Debit Card UI

This credit or debit card UI with flip effect adds both style and functionality to modern web interfaces. Whether you’re building financial tools or showcasing design skills, a card with flip effect helps present information securely and interactively—making it a great fit for multiple real-world applications.

  • Banking Dashboards: Show secure account details behind a credit/debit card with flip effect
  • Payment Forms: Let users check CVV without typing it manually
  • E-commerce: Use demo cards during onboarding
  • UI/UX Portfolios: Highlight card animation skills with this interactive project
  • Loyalty Apps: Represent reward cards with custom flips

You can use this pattern for both credit cards and debit cards, depending on the context. The layout stays the same—just change the card label and branding.

Conclusion

This hands-on tutorial taught you how to create a stunning 3D credit or debit card with flip effect using HTML, CSS, and JavaScript. You now have a flexible, interactive component that adds professionalism and engagement to any web project. With the credit card with flip effect, you improve UI without compromising performance or responsiveness.

  • Built from scratch
  • No external libraries
  • Easy to extend and customize

Start customizing your interactive credit/debit card UI component today and give your users something they’ll remember!

Related Posts

Leave a Comment

Join Us
Scroll to Top