CCHub Logo CCHub Tailwind Collection
Komponenten 360°-Betrachter 360°-Viewer-Komponente

360°-Viewer-Komponente

Eine 360°-Viewer-Komponente mit responsivem Design und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS. Verwendet CSS für Animationen und Interaktionen für ein Mikrointeraktionsgefühl. Kein JavaScript.

Vorschau

HTML-Code 

<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>

Verwandte Komponenten

360°-Viewer-Komponente

Eine einfache 360°-Viewer-Komponente, die nach den Prinzipien des Material Designs entwickelt wurde, lebendige Farben und Unterstützung für dunkle Themen verwendet und sich für die Präsentation von Portfolios eignet.

Offen

360°-Viewer-Komponente

Eine 360°-Viewer-Komponente im brutalistischen Stil mit hohem Kontrast und ungewöhnlichen Layouts, die dunkle Themen und responsive Designeffekte unterstützen.

Offen

360-Grad-Viewer-Komponente

360-Grad-Viewer-Komponente mit Mikrointeraktionen, triadischem Farbschema, komplexer Komplexität, E-Commerce-Zweck, responsivem Design, Unterstützung für dunkle Themen und Tailwind CSS.

Offen