组件 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构建。不需要JavaScript,仅使用CSS进行样式和响应。

打开

360_Viewer_Component

一个简单、响应式的 360° 查看器组件,具有微交互焦点,适用于商业/公司网站,具有大地色调和深色模式支持。旨在模拟交互式 360 度查看器,允许用户“单击并拖动”来旋转图像。

打开

360°查看组件

一个采用材料设计原则设计的简单 360° 观看组件,使用生动的颜色和暗主题支持,适合用于作品展示。

打开