Hiệu ứng 3d cho ảnh thôi.

script.js

@@ -49,21 +49,29 @@ function addFloatingEffects() {
         el.style.animation = 'pulse 2s ease-in-out infinite';
     });
 }
-// Parallax and 3D Effects
+// Enhanced 3D Effects for Images
 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)`;
-    });
+    const images = document.querySelectorAll('img');
+    
+    images.forEach(img => {
+        img.addEventListener('mousemove', (e) => {
+            const rect = img.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const y = e.clientY - rect.top;
+            const centerX = rect.width / 2;
+            const centerY = rect.height / 2;
+            
+            const rotateX = ((centerY - y) / centerY) * 10;
+            const rotateY = ((x - centerX) / centerX) * 10;
+            
+            img.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateZ(20px)`;
+        });
 
-    // Reset position when mouse leaves
-    document.querySelector('main').addEventListener('mouseleave', () => {
-        document.querySelector('main').style.transform = 'rotateY(0) rotateX(0)';
+        img.addEventListener('mouseleave', () => {
+            img.style.transform = 'rotateX(0) rotateY(0) translateZ(0)';
+        });
     });
 }
-
 // Intersection Observer for section animations
 document.addEventListener('DOMContentLoaded', () => {
     createHearts();

style.css

@@ -101,36 +101,36 @@ section.show {
     transform: translateZ(-1px) scale(1.02);
     z-index: -1;
 }
-
 /* 3D Gallery */
 #gallery .aspect-square {
     transform-style: preserve-3d;
     transition: transform 0.5s ease;
+    position: relative;
 }
 
 #gallery .aspect-square:hover {
-    transform: rotateY(15deg) translateZ(20px);
+    transform: rotateY(15deg) rotateX(10deg) translateZ(30px);
 }
-/* Custom hover effect for gallery images */
-.gallery-item {
-    overflow: hidden;
-    position: relative;
+
+#gallery .aspect-square img {
+    transform-style: preserve-3d;
+    transition: transform 0.5s ease, box-shadow 0.5s ease;
+    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
 }
 
-.gallery-item::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.3);
-    opacity: 0;
-    transition: opacity 0.3s ease;
+#gallery .aspect-square:hover img {
+    transform: translateZ(20px);
+    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
+}
+/* Enhanced 3D Effect for Images */
+img {
+    transition: transform 0.5s ease, filter 0.5s ease;
+    transform-style: preserve-3d;
 }
 
-.gallery-item:hover::after {
-    opacity: 1;
+img:hover {
+    transform: rotateY(10deg) rotateX(5deg) translateZ(10px);
+    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.2));
 }
 /* QR Code section */
 #gift {