360° 查看组件

<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>