Free 3D Scene
3D Biometric Credit Card Flip
A titanium biometric credit card that flips 180 degrees in 3D perspective space on hover, revealing magnetic stripe and CVV hologram.
Colours in this gradient
#0f172a#38bdf8#f59e0b#ffffff
background: ;The code
Plain HTML and CSS 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-flip-stage">
<div class="card-3d-wrapper">
<div class="card-3d-inner">
<div class="card-side card-front">
<div class="c-top">
<span class="c-chip">💳</span>
<span class="c-nfc">📡</span>
</div>
<div class="c-number">•••• •••• •••• 8842</div>
<div class="c-bottom">
<div><small>CARDHOLDER</small><b>RAVINDRA NATH JHA</b></div>
<div><small>EXPIRES</small><b>08/29</b></div>
</div>
</div>
<div class="card-side card-back">
<div class="c-mag-stripe"></div>
<div class="c-signature-row">
<div class="c-sig-strip">Ravindra Jha</div>
<div class="c-cvv">892</div>
</div>
<div class="c-hologram">✦ TITANIUM PRIVILEGE</div>
</div>
</div>
</div>
</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.
Create a 3D titanium credit card flip animation in pure HTML and CSS. Requirements: - Front face with metallic chip, contactless icon, card number and cardholder details. - Back face with magnetic stripe, signature strip, and CVV code. - Smooth rotateY(180deg) 3D flip on hover with backface-visibility: hidden. - Zero JavaScript. Return one HTML file with a <style> block.
How to build it, step by step
- 1
Set perspective: 1000px on wrapper and transform-style: preserve-3d on inner card.
- 2
Position front and back faces with backface-visibility: hidden.
- 3
Rotate back face by 180deg and flip inner container on hover.
Customisation tips
- Using cubic-bezier(0.2, 0.8, 0.2, 1) timing makes the flip feel smooth and weighted.