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
Composant Visionneuse à 360°
Un composant de visionneuse réactif à 360° avec des micro-interactions pour les médias sociaux, avec des thèmes clairs et sombres utilisant des couleurs analogues et une complexité modérée.
Composant Visionneuse à 360°
Un composant de visionneuse réactif à 360 degrés conçu pour le commerce électronique, avec prise en charge du mode sombre. Le style est rétro/vintage avec une palette de couleurs pastel. Utilise uniquement HTML et Tailwind CSS.
Composant Visionneuse à 360°
Un composant de visionneuse minimaliste à 360° conçu avec Tailwind CSS, avec des effets réactifs et la prise en charge du thème sombre.