CCHub Logo CCHub Tailwind Collection
コンポーネント 360°ビューア 360°ビューアコンポーネント

360°ビューアコンポーネント

レスポンシブデザインとTailwind CSSを使用したダークテーマをサポートする360°ビューアコンポーネント。アニメーションとインタラクションに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°ビューアコンポーネントで、回転する画像を生の大胆なデザインで紹介し、レスポンシブエフェクトとTailwind CSSを使用したダークテーマのサポートを備えています。

開ける

360°ビューアコンポーネント

Tailwind CSSでデザインされたミニマリストの360°ビューアコンポーネントで、レスポンシブエフェクトとダークテーマのサポートが特徴です。

開ける

360 ビューア コンポーネント

ダークモードをサポートし、レスポンシブデザインを備えた360°ビューアコンポーネントで、Tailwind CSSで構築されています。JavaScript は不要で、スタイルと応答性に CSS のみを使用します。

開ける