HTML + CSSCheckboxes

Checkbox que gira en 3D

La casilla da la vuelta en 3D al marcarla y muestra una cara verde con un check blanco.

Ajustes

16px
1x

Código

<label class="uv-c3"><input type="checkbox"><span><b></b><b><svg viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></b></span>Activar</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

Una casilla que gira convierte un simple sí en un pequeño acontecimiento. Úsala en el «Activar» junto a una función en los ajustes de la cuenta, para confirmar asistencia a un evento o para añadir extras en el configurador de una suscripción. La caja gira sobre su eje como una carta y cae por su lado verde.

La cara trasera siempre es verde, el color que casi todo el mundo lee como «vale», así que no sigue tu color principal. Si choca con tu marca, elige otra casilla. El giro dura más de medio segundo: mejor para pocas opciones importantes que para una lista larga.