3D Login Form UI | HTML, CSS & JavaScript

:root {
            --primary: #00d2ff;
            --success: #00ff88;
            --error: #ff4d4d;
            --glass: rgba(255, 255, 255, 0.1);
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Roboto, sans-serif;
        }

body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #0f0c29;
            background: linear-gradient(135deg, #24243e, #302b63, #0f0c29);
            overflow: hidden;
            perspective: 1000px; /* Essential for 3D effect */
        }

/* The Animated Background Blobs */
        .blob {
            position: absolute;
            width: 300px;
            height: 300px;
            background: linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%);
            border-radius: 50%;
            filter: blur(80px);
            z-index: -1;
            animation: move 20s infinite alternate;
        }

@keyframes move {
            from { transform: translate(-50%, -50%); }
            to { transform: translate(50%, 50%); }
        }

/* The Card */
        .login-card {
            width: 380px;
            padding: 50px 40px;
            background: var(--glass);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 24px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 25px 45px rgba(0,0,0,0.2);
            color: white;
            transition: transform 0.1s ease-out; /* Smooth parallax */
            transform-style: preserve-3d;
        }

.login-card h2 {
            margin-bottom: 30px;
            letter-spacing: 1px;
            font-weight: 600;
            transform: translateZ(50px); /* Lifts text in 3D space */
        }

.input-group {
            position: relative;
            margin-bottom: 35px;
            transform: translateZ(30px);
        }

.input-group input {
            width: 100%;
            padding: 10px 0;
            font-size: 16px;
            color: #fff;
            background: transparent;
            border: none;
            border-bottom: 2px solid rgba(255,255,255,0.5);
            outline: none;
            transition: 0.3s;
        }

.input-group label {
            position: absolute;
            top: 10px;
            left: 0;
            color: rgba(255,255,255,0.6);
            pointer-events: none;
            transition: 0.3s;
        }

/* Interactive Focus States */
        .input-group input:focus ~ label,
        .input-group input:valid ~ label {
            top: -20px;
            font-size: 12px;
            color: var(--primary);
            font-weight: bold;
        }

.input-group input:focus {
            border-bottom: 2px solid var(--primary);
        }

/* Validation Colors */
        .input-group input:not(:placeholder-shown):valid {
            border-bottom-color: var(--success);
        }

/* Password Toggle Icon */
        .toggle-btn {
            position: absolute;
            right: 0;
            top: 10px;
            cursor: pointer;
            font-size: 18px;
            opacity: 0.7;
            transition: 0.3s;
        }

.toggle-btn:hover { opacity: 1; }

button {
            width: 100%;
            padding: 14px;
            border-radius: 12px;
            border: none;
            background: white;
            color: #302b63;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            transition: 0.3s;
            transform: translateZ(40px);
        }

button:hover {
            background: var(--primary);
            color: white;
            box-shadow: 0 10px 20px rgba(0, 210, 255, 0.3);
        }

button:active { transform: translateZ(20px) scale(0.98); }

/* Error Shake */
        .error-shake {
            animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
        }

@keyframes shake {
            10%, 90% { transform: translate3d(-1px, 0, 0); }
            20%, 80% { transform: translate3d(2px, 0, 0); }
            30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
            40%, 60% { transform: translate3d(4px, 0, 0); }
        }

const card = document.getElementById('card');
        const loginForm = document.getElementById('loginForm');
        const passInput = document.getElementById('pass');
        const eyeIcon = document.getElementById('eyeIcon');

// 1. 3D Mouse Interactive Parallax
        document.addEventListener('mousemove', (e) => {
            let xAxis = (window.innerWidth / 2 - e.pageX) / 25;
            let yAxis = (window.innerHeight / 2 - e.pageY) / 25;
            card.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
        });

// Reset card position on mouse leave
        document.addEventListener('mouseleave', () => {
            card.style.transform = `rotateY(0deg) rotateX(0deg)`;
            card.style.transition = "all 0.5s ease";
        });

// 2. Interactive Password Toggle
        eyeIcon.addEventListener('click', () => {
            const type = passInput.getAttribute('type') === 'password' ? 'text' : 'password';
            passInput.setAttribute('type', type);
            eyeIcon.textContent = type === 'password' ? '👁️' : '🙈';
        });

// 3. Form Validation Interaction
        loginForm.addEventListener('submit', (e) => {
            e.preventDefault();
            const passValue = passInput.value;

if (passValue.length < 6) {
                // Trigger shake if password is too short
                card.classList.add('error-shake');
                setTimeout(() => card.classList.remove('error-shake'), 500);
            } else {
                // Success feedback
                const btn = e.target.querySelector('button');
                btn.innerHTML = "Success! ✨";
                btn.style.background = "#00ff88";
            }
        });

- 3D Login Form UI

Live Preview