3D Gallery with Multiple Effects

3D Gallery of Effects

Water Tornado Effect

Fireball Effect

Rainbow Effect

Green Aura Effect

Starfield Effect

Lightning Effect

Wave Effect

Plasma Effect

Matrix Rain Effect

Bubble Effect

Confetti Effect

body { margin: 0; font-family: sans-serif; background: #111; color: #fff; display: flex; flex-direction: column; align-items: center; } h1, h2 { margin: 20px; } .gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; perspective: 1000px; max-width: 1200px; } .card { width: 300px; height: 225px; overflow: hidden; border-radius: 15px; box-shadow: 0 20px 40px rgba(0,0,0,0.5); transition: transform 0.3s ease, box-shadow 0.3s ease; transform-style: preserve-3d; cursor: pointer; } .card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; } .card:hover { transform: rotateY(15deg) rotateX(15deg) scale(1.05); box-shadow: 0 30px 60px rgba(0,0,0,0.7); } .card:hover img { transform: scale(1.1); } .fireball-filter .card img { filter: brightness(1.2) contrast(1.2) saturate(1.5) drop-shadow(0 0 15px orange) drop-shadow(0 0 30px red); transition: filter 0.3s ease; } .fireball-filter .card:hover img { filter: brightness(1.5) contrast(1.5) saturate(2) drop-shadow(0 0 20px orange) drop-shadow(0 0 40px red); } .tornado-container, .fireball-container, .rainbow-container, .aura-container, .starfield-container, .lightning-container, .wave-container, .plasma-container, .matrix-container, .bubble-container, .confetti-container { margin: 40px 0; display: flex; justify-content: center; align-items: center; } canvas { border-radius: 50%; box-shadow: 0 0 30px rgba(255,255,255,0.2); } #tornadoCanvas { background: radial-gradient(circle at center, #003366, #000); } #fireballCanvas { background: radial-gradient(circle at center, #330000, #000); } #rainbowCanvas { background: radial-gradient(circle at center, #222, #000); } #auraCanvas { background: radial-gradient(circle at center, #001100, #000); } #starfieldCanvas { background: black; } #lightningCanvas { background: #000; } #waveCanvas { background: #001f3f; } #plasmaCanvas { background: #000; } #matrixCanvas { background: black; } #bubbleCanvas { background: #001f1f; } #confettiCanvas { background: #111; } // Existing gallery hover const cards = document.querySelectorAll('.card'); cards.forEach(card => { card.addEventListener('mousemove', e => { const rect = card.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 = ((y - centerY) / centerY) * 10; const rotateY = ((x - centerX) / centerX) * 10; card.style.transform = `rotateX(${-rotateX}deg) rotateY(${rotateY}deg) scale(1.05)`; }); card.addEventListener('mouseleave', () => { card.style.transform = 'rotateX(0deg) rotateY(0deg) scale(1)'; }); }); // Water Tornado const tornadoCanvas = document.getElementById('tornadoCanvas'); const tornadoCtx = tornadoCanvas.getContext('2d'); let tornadoAngle = 0; function drawTornado() { tornadoCtx.clearRect(0,0,400,400); for(let i=0;i<100;i++){ const t = i/100; const r = 10 + (100-10)*(1-t); const y = 200 + (t-0.5)*320; const swirl = tornadoAngle + t*10; const xOffset = Math.sin(swirl)*20*(1-t); tornadoCtx.beginPath(); tornadoCtx.ellipse(200+xOffset,y,r,r*0.3,0,0,Math.PI*2); const grad = tornadoCtx.createRadialGradient(200+xOffset,y,r*0.1,200+xOffset,y,r); grad.addColorStop(0,'rgba(0,150,255,0.4)'); grad.addColorStop(1,'rgba(0,150,255,0)'); tornadoCtx.fillStyle=grad; tornadoCtx.fill(); } tornadoAngle+=0.05; requestAnimationFrame(drawTornado); } drawTornado(); // Fireball const fireballCanvas = document.getElementById('fireballCanvas'); const fireballCtx = fireballCanvas.getContext('2d'); const particles = []; function createParticle(){ return {x:200+(Math.random()-0.5)*20,y:200+(Math.random()-0.5)*20,vx:(Math.random()-0.5)*2,vy:(Math.random()-0.5)*2,size:Math.random()*10+5,life:1}; } function drawFireball(){ fireballCtx.fillStyle='rgba(0,0,0,0.2)'; fireballCtx.fillRect(0,0,400,400); if(particles.length<200)particles.push(createParticle()); for(let i=0;i400 && Math.random()>0.975) drops[i]=0; drops[i]++; } requestAnimationFrame(drawMatrix); } drawMatrix(); // Bubble const bubbleCanvas = document.getElementById('bubbleCanvas'); const bubbleCtx = bubbleCanvas.getContext('2d'); const bubbles = []; function createBubble(){ return {x:Math.random()*400,y:400,r:Math.random()*10+5,vy:Math.random()*1+0.5,alpha:1}; } function drawBubbles(){ bubbleCtx.fillStyle='rgba(0,31,31,0.2)'; bubbleCtx.fillRect(0,0,400,400); if(bubbles.length<100) bubbles.push(createBubble()); for(let i=0;i400){confettis.splice(i,1);i--;} } requestAnimationFrame(drawConfetti); } drawConfetti();