Componente visualizzatore a 360°
Un componente visualizzatore a 360° con design reattivo e supporto per temi scuri utilizzando Tailwind CSS. Utilizza CSS per animazioni e interazioni per una sensazione di microinterazione. Niente JavaScript.
Codice 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>Componenti correlati
Componente visualizzatore a 360°
Un semplice componente visualizzatore a 360° in stile Material Design con toni della terra per un contesto di e-commerce. Include un design reattivo con supporto per la modalità oscura, che mostra immagini da picsum.photos e avatar da randomuser.me.
Componente visualizzatore a 360°
Un componente visualizzatore a 360° progettato con uno stile scheumorfico, utilizzando una combinazione di colori in scala di grigi. È dotato di un'interfaccia di media complessità adatta per applicazioni di social media, che supporta temi chiari e scuri.
Componente visualizzatore 360
Un componente visualizzatore a 360 gradi con design Glassmorphism, combinazione di colori monocromatici e complessità moderata. È progettato per scopi di blog/contenuti, è reattivo e supporta la modalità oscura utilizzando Tailwind CSS. Non è incluso alcun JavaScript, solo HTML con le classi Tailwind. Utilizza picsum.photos per le immagini.