Free 3D Scene

3D Holographic Credit Card

A realistic fintech card that tilts in 3D with cursor movement and flips 180° on click to reveal security details. Features gold microchip, foil shimmer, and embossed typography.

dark
css 3d
card
fintech
holographic
interactive

The code

Plain HTML, CSS and JavaScript with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="card-wrap" id="cardWrap">
  <div class="card3d" id="card3d" tabindex="0" role="button" aria-label="3D Credit Card. Click or press Enter to flip">
    <div class="card-face front">
      <div class="card-shine" id="cardShine"></div>
      <div class="card-top">
        <div class="chip">
          <div class="chip-line"></div>
          <div class="chip-line"></div>
        </div>
        <div class="contactless">
          <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M8.5 16.5a5 5 0 0 1 0-7M12 19a8.5 8.5 0 0 0 0-12M15.5 21.5a12 12 0 0 0 0-17"/></svg>
        </div>
      </div>
      <div class="card-number">4532 &bull;&bull;&bull;&bull; &bull;&bull;&bull;&bull; 8924</div>
      <div class="card-bottom">
        <div>
          <small>CARDHOLDER</small>
          <strong>RAVINDRA NATH JHA</strong>
        </div>
        <div>
          <small>EXPIRES</small>
          <strong>08/29</strong>
        </div>
        <div class="card-brand">
          <span class="circle circle-red"></span>
          <span class="circle circle-orange"></span>
        </div>
      </div>
    </div>
    <div class="card-face back">
      <div class="mag-stripe"></div>
      <div class="cvv-row">
        <div class="sig-strip"><span>Authorized Signature &bull; Not Valid Unless Signed</span></div>
        <div class="cvv">842</div>
      </div>
      <p class="card-notes">Use of this card is governed by cardholder agreement. If found, please return to any branch or call 1800-000-CARD.</p>
      <div class="hologram-seal"></div>
    </div>
  </div>
  <p class="hint">Move cursor to tilt &bull; Click to flip card</p>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same 3d scene, then ask it to adapt the colours, text or framework to your project.

Works with Claude · ChatGPT · Cursor · v0 · Bolt · Gemini

Create an interactive 3D holographic credit card in plain HTML, CSS and vanilla JavaScript.

Requirements:
- A wrapper with perspective: 1200px on a dark radial-gradient background.
- A card element with standard ISO credit card ratio (aspect-ratio: 1.586, max-width 360px), transform-style: preserve-3d.
- Two sides: front and back, both with backface-visibility: hidden. Back side is pre-rotated with transform: rotateY(180deg).
- Front face: gold EMV microchip with line details, contactless SVG icon, embossed 16-digit card number in monospace, cardholder name, expiry date, and overlapping dual-circle card network brand logo.
- An interactive specular shine highlight overlay positioned with CSS variables --mx and --my using mix-blend-mode: overlay.
- Back face: full-width black magnetic stripe, signature strip with safety pattern, white CVV box, small disclaimer text, and a mini rainbow hologram seal.
- JavaScript: pointermove tracks cursor across the card to apply realistic 3D tilt (rotateX and rotateY up to 16deg) and move the light reflection. Click or Enter key toggles the 180-degree flip.
- Full keyboard accessibility and prefers-reduced-motion support.

Return a single HTML file with <style> and <script> tags.

How to build it, step by step

1
Set perspective on the parent container so 3D rotations show true geometric depth.
2
Give the card transform-style: preserve-3d and create two faces (front and back) stacked with position: absolute.
3
Add backface-visibility: hidden to both faces and rotate the back face 180 degrees around Y.
4
Draw the EMV chip and card details with CSS gradients, rounded corners, and subtle text-shadows for the embossed effect.
5
Use pointermove to calculate relative cursor coordinates (0 to 1) and map them to rotation angles and shine position.
6
Toggle a .flipped class on click or keydown that adds 180deg to the Y rotation.

Customisation tips

Use ISO/IEC 7810 standard aspect ratio 1.586 (approx 85.6mm x 53.98mm) so the card proportions look authentic.
The specular shine using mix-blend-mode: overlay mimics real PVC plastic lamination.
Support both mouse tilt and keyboard flip so everyone can interact with the card.