Composant Visionneuse à 360°
Un composant de visionneuse 360° réactif conçu dans un style 3D avec prise en charge du thème sombre, à l’aide d’images fictives de picsum.photos.
HTML Code
<div class="flex flex-col items-center justify-center bg-gray-800 p-6 rounded-lg shadow-lg md:flex-row md:space-x-8">
<div class="w-full md:w-1/2 transform perspective-1000">
<div class="relative w-full h-64 rounded overflow-hidden shadow-2xl">
<img src="https://picsum.photos/500/400/?random" alt="360 view" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 ease-in-out hover:rotate-y-360" />
</div>
</div>
<div class="flex flex-col justify-center mt-4 md:mt-0">
<h2 class="text-white text-xl font-bold mb-2">Explore the 360° View</h2>
<p class="text-gray-400">Experience an immersive 3D view of the product. Move your cursor around to get a complete view.</p>
<div class="mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-600" />
<p class="text-white text-sm">Uploaded by John Doe</p>
</div>
</div>
</div>
<style>
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Dark Mode Styles */
@media (prefers-color-scheme: dark) {
.bg-gray-800 { background-color: #2d3748; }
.text-gray-400 { color: #cbd5e0; }
.border-gray-600 { border-color: #4a5568; }
}
/* 360° Rotation Effect */
@keyframes rotate {
from { transform: rotateY(0deg); }
to { transform: rotateY(360deg); }
}
.hover\:rotate-y-360:hover {
animation: rotate 2s infinite;
}
</style>Composants associés
360_Viewer_Component
Un composant complexe de visualisation de propriétés à 360 degrés pour les plateformes immobilières, avec un design monospace/développeur, une palette de couleurs rétro/vintage et une réactivité totale avec prise en charge du mode sombre.
Composant Visionneuse à 360°
Un composant de visionneuse à 360° inspiré du Material Design avec des couleurs vives pour présenter le travail ou les produits, avec un design réactif et une prise en charge du mode sombre.
Composant Visionneuse à 360°
Un composant de visionneuse à 360° avec un design skeuomorphe, des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.