HTML + CSSCartes
Carte bancaire 3D qui se retourne
Une carte métallique qui s'incline vers le pointeur et se retourne pour montrer son verso au clic.
Réglages
16px
1x
Code
<button type="button" class="uv-kbf" aria-pressed="false" aria-label="Voir le verso de la carte"><span class="in"><span class="fr"><span class="br">Aimran Bank</span><span class="ch"></span><svg class="nf" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true"><path d="M8 7.5a6 6 0 0 1 0 9M11.5 5a10 10 0 0 1 0 14M15 3a13.5 13.5 0 0 1 0 18"/></svg><span class="nb">5412 •••• •••• 2026</span><span class="nm">LUCÍA MARTÍN</span><span class="ex">08/29</span><span class="sh"></span></span><span class="bk"><span class="mg"></span><span class="sg"><span>CVV</span><b>•••</b></span><span class="lg">Touche pour retourner</span></span></span></button>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Cartes
Voir tout : CartesOù l’utiliser
Les applis fintech et les pages de cartes adorent une carte qui ressemble à un objet. Celle-ci a une surface de métal brossé, une puce dorée et le logo sans contact ; elle s'incline en 3D vers le pointeur avec un reflet mobile, et un clic ou Entrée la retourne pour montrer la bande magnétique et le panneau de signature avec le cryptogramme masqué.
Toute la carte est un bouton avec aria-pressed, le retournement fonctionne donc au clavier. Choisis noir et or, argent et bleu ou le métal de ta marque.