360° 뷰어 구성 요소

반응형 디자인과 Tailwind CSS를 사용하는 어두운 테마를 지원하는 360° 뷰어 구성 요소입니다. 마이크로 인터랙션 느낌을 위한 애니메이션 및 상호 작용에 CSS를 사용합니다. 자바스크립트가 없습니다.

미리 보기

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° 뷰어 구성 요소

다크 모드를 지원하는 Tailwind CSS를 사용하는 미니멀하고 반응이 빠른 360° 뷰어 구성 요소입니다.

열다

360 Viewer 구성 요소

Tailwind CSS로 구축된 다크 모드 지원 및 반응형 디자인을 갖춘 360° 뷰어 구성 요소입니다. JavaScript가 필요하지 않으며 스타일링 및 응답성을 위해 CSS만 사용합니다.

열다

파스텔브루탈리스트360애셋뷰어

단순하고 반응이 빠른 360° Asset Viewer 구성 요소로, 브루탈리즘 디자인 스타일과 파스텔 핑크 색상 구성표가 특징입니다. 대시보드에 맞게 조정된 이 제품은 정적 이미지 자리 표시자(360° 보기 시뮬레이션), 작동하지 않는 제어 버튼 및 정보 표시 기능을 갖추고 있습니다. Tailwind CSS로 제작된 이 제품은 다크 모드를 지원하며 두꺼운 테두리와 하드 오프셋 그림자로 원시적이고 대담한 미학을 보여줍니다.

열다