HTML 代码
<div class="bg-gradient-to-br from-purple-100 via-pink-100 to-indigo-100 p-4 min-h-screen flex items-center justify-center dark:from-gray-900 dark:via-purple-950 dark:to-indigo-950">
<div class="container mx-auto px-4 py-8 max-w-6xl">
<h2 class="text-4xl md:text-5xl lg:text-6xl font-extrabold text-center text-gray-900 mb-12 relative z-10 animate-fade-in-down dark:text-gray-100">
<span class="block">Explore Our <span class="text-indigo-600 dark:text-indigo-400">Collection</span></span>
<span class="block text-2xl md:text-3xl text-purple-600 dark:text-purple-400 mt-2">Experience 3D Depth</span>
<div class="absolute inset-0 flex items-center justify-center -z-10">
<div class="w-32 h-32 md:w-48 md:h-48 bg-purple-200 dark:bg-purple-800 rounded-full mix-blend-multiply opacity-30 blur-2xl animate-spin-slow"></div>
<div class="w-48 h-48 md:w-64 md:h-64 bg-indigo-200 dark:bg-indigo-800 rounded-full mix-blend-multiply opacity-30 blur-2xl animate-spin-reverse-slow"></div>
</div>
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Product Card 1 -->
<div class="card-3d-container perspective-1000">
<div class="card-3d transition-transform duration-700 ease-in-out transform-style-preserve-3d rounded-xl shadow-2xl bg-white dark:bg-gray-800 p-6 flex flex-col items-center justify-between hover:scale-105 hover:shadow-purple-500/50 dark:hover:shadow-purple-400/50 relative overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-br from-pink-500 to-purple-600 dark:from-pink-700 dark:to-purple-900 opacity-10 group-hover:opacity-20 transition-opacity duration-300 rounded-xl"></div>
<div class="card-front w-full flex flex-col items-center justify-between backface-hidden">
<div class="relative w-full h-48 mb-4 overflow-hidden rounded-lg shadow-inner-lg transform transition-transform duration-500 ease-out group-hover:z-20 group-hover:scale-105">
<img src="https://picsum.photos/id/157/400/300" alt="Elegant Watch" class="w-full h-full object-cover rounded-lg">
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/30 dark:to-black/50 rounded-lg"></div>
<span class="absolute top-3 right-3 text-sm px-3 py-1 bg-purple-600 text-white rounded-full font-semibold shadow-md">New Arrival</span>
</div>
<h3 class="text-2xl font-bold text-gray-900 mb-2 dark:text-white">AstroPulse Watch</h3>
<p class="text-md text-gray-600 text-center mb-4 dark:text-gray-300">Precision, Elegance, Future.</p>
<div class="flex items-center justify-between w-full mb-4">
<span class="text-3xl font-extrabold text-indigo-600 dark:text-indigo-400">$299</span>
<p class="text-lg font-medium text-gray-500 line-through dark:text-gray-400">$349</p>
</div>
<button class="w-full py-3 px-6 bg-purple-600 text-white rounded-lg hover:bg-purple-700 dark:bg-purple-800 dark:hover:bg-purple-700 transition duration-300 text-lg font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 active:translate-y-0 relative overflow-hidden">
<span class="absolute inset-0 w-full h-full bg-gradient-to-r from-purple-500 to-indigo-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
<span class="relative z-10">Add to Cart</span>
</button>
<a href="#" class="mt-4 text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-500 text-sm font-medium transition-colors">View Details</a>
</div>
<div class="card-back absolute w-full h-full flex flex-col items-center justify-center p-6 bg-white dark:bg-gray-800 rounded-xl backface-hidden transform rotateY-180">
<p class="text-lg text-gray-700 text-center mb-4 dark:text-gray-200">Crafted with aerospace-grade sapphire glass and a sustainable recycled titanium casing.</p>
<ul class="text-md text-gray-600 list-disc list-inside space-y-2 mb-6 dark:text-gray-300">
<li>Water Resistance: 100m</li>
<li>Battery Life: 30 days</li>
<li>Smart Notifications</li>
<li>Eco-Friendly Materials</li>
</ul>
<button class="w-full py-3 px-6 bg-pink-500 text-white rounded-lg hover:bg-pink-600 dark:bg-pink-700 dark:hover:bg-pink-600 transition duration-300 text-lg font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 active:translate-y-0">
Customize Now
</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="card-3d-container perspective-1000">
<div class="card-3d transition-transform duration-700 ease-in-out transform-style-preserve-3d rounded-xl shadow-2xl bg-white dark:bg-gray-800 p-6 flex flex-col items-center justify-between hover:scale-105 hover:shadow-indigo-500/50 dark:hover:shadow-indigo-400/50 relative overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-br from-indigo-500 to-pink-600 dark:from-indigo-700 dark:to-pink-900 opacity-10 group-hover:opacity-20 transition-opacity duration-300 rounded-xl"></div>
<div class="card-front w-full flex flex-col items-center justify-between backface-hidden">
<div class="relative w-full h-48 mb-4 overflow-hidden rounded-lg shadow-inner-lg transform transition-transform duration-500 ease-out group-hover:z-20 group-hover:scale-105">
<img src="https://picsum.photos/id/29/400/300" alt="Wireless Headphones" class="w-full h-full object-cover rounded-lg">
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/30 dark:to-black/50 rounded-lg"></div>
<span class="absolute top-3 left-3 text-sm px-3 py-1 bg-indigo-600 text-white rounded-full font-semibold shadow-md">Limited Offer</span>
</div>
<h3 class="text-2xl font-bold text-gray-900 mb-2 dark:text-white">SonicWave Headphones</h3>
<p class="text-md text-gray-600 text-center mb-4 dark:text-gray-300">Immersive Sound, Unrivaled Comfort.</p>
<div class="flex items-center justify-between w-full mb-4">
<span class="text-3xl font-extrabold text-purple-600 dark:text-purple-400">$189</span>
<p class="text-lg font-medium text-gray-500 line-through dark:text-gray-400">$220</p>
</div>
<button class="w-full py-3 px-6 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 dark:bg-indigo-800 dark:hover:bg-indigo-700 transition duration-300 text-lg font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 active:translate-y-0 relative overflow-hidden">
<span class="absolute inset-0 w-full h-full bg-gradient-to-r from-indigo-500 to-purple-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
<span class="relative z-10">Add to Cart</span>
</button>
<a href="#" class="mt-4 text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-500 text-sm font-medium transition-colors">View Details</a>
</div>
<div class="card-back absolute w-full h-full flex flex-col items-center justify-center p-6 bg-white dark:bg-gray-800 rounded-xl backface-hidden transform rotateY-180">
<p class="text-lg text-gray-700 text-center mb-4 dark:text-gray-200">Experience crystal-clear audio with adaptive noise cancellation and 40-hour battery life.</p>
<ul class="text-md text-gray-600 list-disc list-inside space-y-2 mb-6 dark:text-gray-300">
<li>Noise Cancellation: Adaptive</li>
<li>Battery Life: 40 hours</li>
<li>Ergonomic Design</li>
<li>Bluetooth 5.2</li>
</ul>
<button class="w-full py-3 px-6 bg-pink-500 text-white rounded-lg hover:bg-pink-600 dark:bg-pink-700 dark:hover:bg-pink-600 transition duration-300 text-lg font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 active:translate-y-0">
Read Reviews
</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="card-3d-container perspective-1000">
<div class="card-3d transition-transform duration-700 ease-in-out transform-style-preserve-3d rounded-xl shadow-2xl bg-white dark:bg-gray-800 p-6 flex flex-col items-center justify-between hover:scale-105 hover:shadow-pink-500/50 dark:hover:shadow-pink-400/50 relative overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-br from-purple-500 to-indigo-600 dark:from-purple-700 dark:to-indigo-900 opacity-10 group-hover:opacity-20 transition-opacity duration-300 rounded-xl"></div>
<div class="card-front w-full flex flex-col items-center justify-between backface-hidden">
<div class="relative w-full h-48 mb-4 overflow-hidden rounded-lg shadow-inner-lg transform transition-transform duration-500 ease-out group-hover:z-20 group-hover:scale-105">
<img src="https://picsum.photos/id/27/400/300" alt="Smart Speaker" class="w-full h-full object-cover rounded-lg">
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/30 dark:to-black/50 rounded-lg"></div>
<span class="absolute bottom-3 right-3 text-sm px-3 py-1 bg-pink-600 text-white rounded-full font-semibold shadow-md">Best Seller</span>
</div>
<h3 class="text-2xl font-bold text-gray-900 mb-2 dark:text-white">EchoSphere Speaker</h3>
<p class="text-md text-gray-600 text-center mb-4 dark:text-gray-300">Intelligent Audio, Seamless Integration.</p>
<div class="flex items-center justify-between w-full mb-4">
<span class="text-3xl font-extrabold text-purple-600 dark:text-purple-400">$129</span>
<p class="text-lg font-medium text-gray-500 line-through dark:text-gray-400">$150</p>
</div>
<button class="w-full py-3 px-6 bg-pink-600 text-white rounded-lg hover:bg-pink-700 dark:bg-pink-800 dark:hover:bg-pink-700 transition duration-300 text-lg font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 active:translate-y-0 relative overflow-hidden">
<span class="absolute inset-0 w-full h-full bg-gradient-to-r from-pink-500 to-purple-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
<span class="relative z-10">Add to Cart</span>
</button>
<a href="#" class="mt-4 text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-500 text-sm font-medium transition-colors">View Details</a>
</div>
<div class="card-back absolute w-full h-full flex flex-col items-center justify-center p-6 bg-white dark:bg-gray-800 rounded-xl backface-hidden transform rotateY-180">
<p class="text-lg text-gray-700 text-center mb-4 dark:text-gray-200">Your smart home hub with voice assistant integration and 360-degree sound.</p>
<ul class="text-md text-gray-600 list-disc list-inside space-y-2 mb-6 dark:text-gray-300">
<li>Voice Assistant: AI Powered</li>
<li>Audio: 360° Omnidirectional</li>
<li>Smart Home Integration</li>
<li>Multi-room Audio</li>
</ul>
<button class="w-full py-3 px-6 bg-purple-500 text-white rounded-lg hover:bg-purple-600 dark:bg-purple-700 dark:hover:bg-purple-600 transition duration-300 text-lg font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 active:translate-y-0">
Explore Features
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
/* Base styles for the 3D card */
.perspective-1000 {
perspective: 1000px;
}
.card-3d-container {
position: relative;
width: 100%;
height: 100%; /* Ensure container has height for children */
display: flex; /* Make it a flex container to center child */
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
min-height: 480px; /* Minimum height for cards */
}
.card-3d {
position: relative;
width: 100%;
height: auto; /* Adjust height based on content */
min-height: 480px; /* Ensure a consistent minimum height */
transform-origin: center center; /* Ensure consistent rotation origin */
}
/* Front and back faces */
.backface-hidden {
backface-visibility: hidden;
}
.card-front,
.card-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 1.5rem;
box-sizing: border-box;
}
.card-back {
transform: rotateY(180deg);
}
/* Flip effect on hover */
.card-3d-container:hover .card-3d {
transform: rotateY(180deg);
}
/* Inner shadow effect for image */
.shadow-inner-lg {
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06), inset 0 4px 6px 0 rgba(0, 0, 0, 0.05);
}
.dark .shadow-inner-lg {
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.2), inset 0 4px 6px 0 rgba(0, 0, 0, 0.15);
}
/* Custom animations */
@keyframes fade-in-down {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in-down {
animation: fade-in-down 1s ease-out forwards;
}
@keyframes spin-slow {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.animate-spin-slow {
animation: spin-slow 15s linear infinite;
}
@keyframes spin-reverse-slow {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
.animate-spin-reverse-slow {
animation: spin-reverse-slow 20s linear infinite;
}
/* Responsive adjustments for overall layout */
@media (max-width: 767px) {
.card-3d-container {
min-height: 450px; /* Slightly reduce min-height for mobile */
}
.card-3d {
min-height: 450px;
}
.card-front h3, .card-back h3 {
font-size: 1.75rem; /* Equivalent to text-2xl */
}
.card-front p, .card-back p {
font-size: 0.875rem; /* Equivalent to text-sm */
}
.card-front span.text-3xl {
font-size: 2rem; /* Reduce price size slightly */
}
}
</style>