コンポーネント 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_Viewer_Component

エンターテインメント/メディアプラットフォーム向けに設計された複雑な360°製品ビューアコンポーネントで、カラーグラデーションを多用し、温かみのあるニュートラルカラースキーム内でのスムーズなトランジションを特徴としています。完全にレスポンシブで、ダークモードをサポートしています。

開ける

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

ニューモーフィズムデザイン、トライアドカラースキーム(例:ライトブルー、ピンク、イエローオレンジ)、ソーシャルメディアアプリケーション向けの適度な複雑さを備えた360°ビューアコンポーネント。このコンポーネントはレスポンシブで、Tailwind クラスを使用したダークモードをサポートし、画像には picsum.photos を使用し、アバターには randomuser.me を使用します。JavaScriptは必要ありません。

開ける

360_viewer_component

サイバーパンクと秋の色の美学を備えた、教育プラットフォーム向けに設計された、複雑で応答性の高い360°ビューアコンポーネント。ダークモードのサポート、インタラクティブな要素、豊富なタイポグラフィが特徴です。

開ける