HTML + CSSCards
Tarjeta bancaria 3D que gira
Una tarjeta metálica que se inclina con el puntero y gira para enseñar el reverso al pulsarla.
Ajustes
16px
1x
Código
<button type="button" class="uv-kbf" aria-pressed="false" aria-label="Ver el reverso de la tarjeta"><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">Toca para girar</span></span></span></button>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Cards
Ver todos: CardsDónde usarlo
A las apps fintech y a las landings de tarjetas les encanta una tarjeta que parezca un objeto. Esta tiene superficie de metal cepillado, chip dorado y símbolo sin contacto; se inclina en 3D hacia el puntero con un reflejo que se mueve, y con un clic o Intro se da la vuelta para enseñar la banda magnética y el panel de firma con el CVV oculto.
Toda la tarjeta es un botón con aria-pressed, así que el giro funciona con teclado y lectores de pantalla. Cambia los dos colores por negro y oro, plata y azul o el metal de tu marca.