CCHub Logo CCHub Tailwind Collection
구성 요소 360° 뷰어 360° 뷰어 구성 요소

360° 뷰어 구성 요소

마이크로 인터랙션으로 설계된 360° 뷰어 구성 요소로, Tailwind CSS를 사용하여 반응형 효과와 어두운 테마를 지원합니다.

미리 보기

HTML 코드 

<div class="relative w-full h-96 overflow-hidden bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
    <div class="absolute inset-0 flex items-center justify-center">
        <img src="https://picsum.photos/400/300" alt="360 View" class="transition-transform duration-300 transform hover:scale-110" />
    </div>
    <div class="absolute inset-0 flex items-center justify-center">
        <img src="https://picsum.photos/400/300?blur" alt="360 View" class="transition-opacity duration-300 opacity-0 hover:opacity-100" />
    </div>
    <div class="absolute inset-0 flex items-center justify-center">
        <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition duration-300">
            Rotate
        </button>
    </div>
</div>
<div class="mt-4 text-center">
    <h2 class="text-xl font-semibold dark:text-white">Explore Our 360° View</h2>
    <p class="text-gray-600 dark:text-gray-400">Hover over the image to see the effect!</p>
</div>

관련 구성 요소

360° 뷰어 구성 요소

Glassmorphism 스타일의 360° 뷰어 구성 요소로, 젖빛 유리와 같은 반투명 요소와 흐림 효과를 특징으로 하며 반응형 디자인과 어두운 테마를 지원합니다.

열다

360 Viewer 구성 요소

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

열다

360_Viewer_Component_Watercolor_Corporate_Blues

수채화/예술적 디자인 스타일과 기업 블루 색상 구성표가 있는 복잡한 360° 뷰어 구성 요소로, 예약 및 예약 시스템에 특별히 적합합니다. 여러 대화형 요소를 특징으로 하며 다크 모드 지원으로 완벽하게 반응합니다.

열다