-
3D Login Form UI
HTML
CSS
JavaScript
<div class="container"> <div class="glow" id="ambient-glow"></div> <div class="card" id="card"> <div class="shine" id="shine"></div> <div class="content"> <h2>Interactive</h2> <p>Move your mouse around to tilt the card and watch the light reflect off the surface.</p> </div> </div> </div>
:root { --b-radius: 20px; } body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background: #121212; font-family: sans-serif; } .stage { perspective: 1000px; } .card { width: 200px; height: 200px; background: linear-gradient(45deg, #ff00cc, #3333ff); border-radius: var(--b-radius); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); transform-style: preserve-3d; display: flex; align-items: center; justify-content: center; color: white; padding: 20px; text-align: center; } .content { transform: translateZ(50px); }
const card = document.getElementById('card'); const shine = document.getElementById('shine'); const glow = document.getElementById('ambient-glow'); card.addEventListener('mousemove', (e) => { const rect = card.getBoundingClientRect(); // Calculate mouse position relative to card center const mouseX = e.clientX - rect.left; const mouseY = e.clientY - rect.top; const centerX = rect.width / 2; const centerY = rect.height / 2; // 1. Tilt Rotation (Max 20 degrees) const rotateX = ((mouseY - centerY) / centerY) * -20; const rotateY = ((mouseX - centerX) / centerX) * 20; card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`; // 2. Dynamic Shine Position const pX = (mouseX / rect.width) * 100; const pY = (mouseY / rect.height) * 100; shine.style.background = `radial-gradient(circle at ${pX}% ${pY}%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 70%)`; // 3. Subtle Ambient Glow Movement glow.style.opacity = "0.4"; glow.style.transform = `translate(${(mouseX - centerX)/5}px, ${(mouseY - centerY)/5}px)`; }); // Reset everything on mouse leave card.addEventListener('mouseleave', () => { card.style.transform = `perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)`; shine.style.opacity = "0"; glow.style.opacity = "0.15"; glow.style.transform = `translate(0,0)`; });
Live Preview
- 3D Login Form UI