Компоненты Просмотрщик на 360° Компонент просмотра на 360°

Компонент просмотра на 360°

Компонент просмотра на 360° с адаптивным дизайном и поддержкой темных тем с использованием Tailwind CSS. Использует CSS для анимации и взаимодействий для ощущения микровзаимодействия. Нет JavaScript.

Предварительный просмотр

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>

Связанные компоненты

Компонент просмотра на 360°

Компонент 360° Viewer, выполненный в скевоморфном стиле с использованием цветовой схемы в оттенках серого. Он имеет интерфейс средней сложности, подходящий для приложений социальных сетей, поддерживающий как светлую, так и темную темы.

Открытый

Компонент просмотра на 360°

Минималистичный компонент просмотра на 360°, разработанный с помощью Tailwind CSS, с отзывчивыми эффектами и поддержкой темной темы.

Открытый

Компонент просмотра на 360°

Отзывчивый компонент 360-градусного просмотрщика, предназначенный для электронной коммерции, с поддержкой темного режима. Стилистика выполнена в стиле ретро/винтаж с пастельной цветовой гаммой. Использует только HTML и Tailwind CSS.

Открытый