HTML + CSSCheckboxes
Checkbox que gira con degradado
El cuadro da la vuelta en 3D y enseña su otra cara: un cuadrado con degradado y el check.
Ajustes
16px
1x
Código
<label class="uv-ck2f"><input type="checkbox"><span class="bx"><i class="fr"></i><i class="bk"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></i></span>Activar 3D</label>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 Checkboxes
Dónde usarlo
El giro queda muy bien en extras opcionales que se eligen uno a uno: «Añadir desayuno» al reservar una habitación, el papel de regalo en el checkout de una tienda o los ingredientes de una pizza a tu gusto. Cada casilla se voltea como una carta y ves de un vistazo qué has añadido. Un checkbox 3D en CSS.
El giro dura algo más que un check normal, así que va mejor en listas cortas que en una página de ajustes larga. Bájale la velocidad si tu marca es tranquila o súbela si buscas algo más juguetón.