Componente de visor de 360°
Un componente de visor de 360° con diseño responsivo y soporte de temas oscuros usando Tailwind CSS. Utiliza CSS para animaciones e interacciones para una sensación de microinteracción. Sin JavaScript.
Código HTML
<div class="flex justify-center items-center h-screen bg-gray-200 dark:bg-gray-800">
<div class="relative w-64 h-64">
<div class="absolute inset-0 bg-cover bg-center transform transition-transform duration-500 ease-in-out hover:rotate-180" style="background-image: url('https://picsum.photos/id/237/256/256');"></div>
<div class="absolute inset-0 flex justify-center items-center opacity-0 hover:opacity-100 transition-opacity duration-300">
<div class="text-white text-xl font-bold">View 360</div>
</div>
</div>
</div>Componentes relacionados
360DegreeViewerComponent
Un componente de visor 360 simple con un diseño brutalista, colores complementarios y compatibilidad con el modo oscuro. Utiliza solo HTML y Tailwind CSS.
Componente de visor de 360°
Un componente de visor de 360° diseñado con un estilo esqueuomórfico, utilizando un esquema de color en escala de grises. Cuenta con una interfaz de complejidad media adecuada para aplicaciones de redes sociales, que admite temas claros y oscuros.
360_viewer_industrial_finance
Un componente de visor de 360° simple y receptivo con una estética industrial y cruda y un esquema de colores de arco iris degradado, diseñado para interfaces financieras y bancarias. Incluye soporte para modo oscuro.