Thêm hiệu ứng 3d

components/3d-card.js

@@ -0,0 +1,53 @@
+class ThreeDCard extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    perspective: 1000px;
+                }
+                
+                .card {
+                    width: 100%;
+                    height: 100%;
+                    position: relative;
+                    transform-style: preserve-3d;
+                    transition: transform 0.8s;
+                }
+                
+                :host(:hover) .card {
+                    transform: rotateY(15deg);
+                }
+                
+                .card-front, .card-back {
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                    backface-visibility: hidden;
+                    border-radius: 1rem;
+                    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+                }
+                
+                .card-back {
+                    transform: rotateY(180deg);
+                    background: white;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    padding: 1rem;
+                }
+            </style>
+            <div class="card">
+                <div class="card-front">
+                    <slot name="front"></slot>
+                </div>
+                <div class="card-back">
+                    <slot name="back"></slot>
+                </div>
+            </div>
+        `;
+    }
+}
+
+customElements.define('3d-card', ThreeDCard);

index.html

@@ -16,8 +16,8 @@
 
     <main>
         <!-- Hero Section -->
-        <section class="relative h-screen flex items-center justify-center bg-[url('https://static.photos/white/1200x630/42')] bg-cover bg-center">
-            <div class="absolute inset-0 bg-black bg-opacity-50"></div>
+        <section class="hero-section relative h-screen flex items-center justify-center overflow-hidden">
+<div class="absolute inset-0 bg-black bg-opacity-50"></div>
             <div class="relative z-10 text-center px-4">
                 <h1 class="text-5xl md:text-7xl font-serif text-white mb-6">Sarah & James</h1>
                 <p class="text-xl md:text-2xl text-white mb-8">June 15, 2024 • The Grand Ballroom</p>
@@ -195,17 +195,24 @@
     <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
     <style>
         /* Add subtle heartbeat to hero section */
-        section.relative h1 {
+        section.hero-section h1 {
             animation: heartbeat 1.5s ease-in-out infinite;
+            transform-style: preserve-3d;
         }
         
         @keyframes heartbeat {
             0% { transform: scale(1); }
-            25% { transform: scale(1.05); }
+            25% { transform: scale(1.05) translateZ(10px); }
             50% { transform: scale(1); }
-            75% { transform: scale(1.03); }
+            75% { transform: scale(1.03) translateZ(5px); }
             100% { transform: scale(1); }
         }
+
+        /* 3D Depth for main content */
+        main {
+            transform-style: preserve-3d;
+            transition: transform 0.5s ease;
+        }
     </style>
 </body>
 </html>

script.js

@@ -49,13 +49,27 @@ function addFloatingEffects() {
         el.style.animation = 'pulse 2s ease-in-out infinite';
     });
 }
+// Parallax and 3D Effects
+function init3DEffects() {
+    // Mouse move parallax
+    document.addEventListener('mousemove', (e) => {
+        const xAxis = (window.innerWidth / 2 - e.pageX) / 25;
+        const yAxis = (window.innerHeight / 2 - e.pageY) / 25;
+        document.querySelector('main').style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
+    });
+
+    // Reset position when mouse leaves
+    document.querySelector('main').addEventListener('mouseleave', () => {
+        document.querySelector('main').style.transform = 'rotateY(0) rotateX(0)';
+    });
+}
 
 // Intersection Observer for section animations
 document.addEventListener('DOMContentLoaded', () => {
     createHearts();
-addFloatingEffects();
-    
-    const sections = document.querySelectorAll('section');
+    addFloatingEffects();
+    init3DEffects();
+const sections = document.querySelectorAll('section');
 const observer = new IntersectionObserver((entries) => {
         entries.forEach(entry => {
             if (entry.isIntersecting) {

style.css

@@ -56,19 +56,61 @@ a, button, input[type="submit"], label {
 ::-webkit-scrollbar-thumb:hover {
     background: #555;
 }
+/* 3D Perspective for the page */
+body {
+    perspective: 1000px;
+    overflow-x: hidden;
+}
 
 /* Animation for sections */
 section {
     opacity: 0;
-    transform: translateY(20px);
+    transform: translateY(20px) rotateX(5deg);
     transition: opacity 0.6s ease-out, transform 0.6s ease-out;
+    transform-style: preserve-3d;
 }
 
 section.show {
     opacity: 1;
-    transform: translateY(0);
+    transform: translateY(0) rotateX(0);
+}
+
+/* 3D Card Effect for Wedding Details */
+#details .grid > div {
+    transform: translateZ(20px);
+    transition: transform 0.5s ease;
+}
+
+#details .grid > div:hover {
+    transform: translateZ(30px) rotateY(5deg);
+}
+
+/* Parallax Effect for Hero */
+.hero-section {
+    transform-style: preserve-3d;
+}
+
+.hero-section::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: url('https://static.photos/nature/1200x630/42') center/cover no-repeat fixed;
+    transform: translateZ(-1px) scale(1.02);
+    z-index: -1;
+}
+
+/* 3D Gallery */
+#gallery .aspect-square {
+    transform-style: preserve-3d;
+    transition: transform 0.5s ease;
 }
 
+#gallery .aspect-square:hover {
+    transform: rotateY(15deg) translateZ(20px);
+}
 /* Custom hover effect for gallery images */
 .gallery-item {
     overflow: hidden;