Login & Registration Form with 3D Background

Open In Editor Publish Your Code

/* --- ANA GİRİŞ KUTUSU WRAPPER --- */
        .wrapper {
            width: 100%;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            perspective: 1000px; /* 3D dönüş efekti için */
        }

/* --- DÖNÜŞ ANİMASYONU İÇİN KUTU --- */
        .login-box {
            position: relative;
            width: 420px;
            min-height: 600px; /* Sosyal medya ikonları için yükseklik artırıldı */
            transform-style: preserve-3d;
            transition: transform 1s;
        }
        
        .login-box.flipped {
            transform: rotateY(180deg);
        }
        
        /* --- FORM KUTULARI (ÖN VE ARKA YÜZ) --- */
        .form-box {
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(26, 26, 46, 0.25);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 6.5em 3em 3em 3em;
            color: var(--secondary-color);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
            backface-visibility: hidden; /* Arkada kalan yüzü gizler */
            display: flex;
            flex-direction: column;
        }
        
        .form-box.register {
            transform: rotateY(180deg); /* Kayıt formunu arkaya döndürür */
        }

/* --- ÜSTTEN ÇIKAN BAŞLIK --- */
        .login-header {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--primary-color);
            width: 160px;
            height: 70px;
            border-radius: 0 0 20px 20px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        }

.login-header span {
            font-size: 30px;
            color: var(--dark-color);
            font-weight: 600;
        }
        
        .login-header::before, .login-header::after {
            content: "";
            position: absolute;
            top: 0;
            width: 30px;
            height: 30px;
            background: transparent;
        }

.login-header::before {
            left: -30px;
            border-top-right-radius: 100%;
            box-shadow: 15px 0 0 0 var(--primary-color);
        }

.login-header::after {
            right: -30px;
            border-top-left-radius: 100%;
            box-shadow: -15px 0 0 0 var(--primary-color);
        }

/* --- GİRDİ ALANLARI --- */
        .input-box {
            position: relative;
            display: grid;
            grid-template-columns: max-content 1fr;
            align-items: center;
            column-gap: 0.75rem;
            border-bottom: 2px solid rgba(255, 255, 255, 0.3);
            margin: 15px 0; /* Margin azaltıldı */
        }

.input-icon, .input-eye {
            font-size: 1.25rem;
            color: var(--primary-color);
        }
        
        .input-field {
            width: 100%;
            height: 45px;
            background: none;
            border: none;
            outline: none;
            font-size: 1rem;
            color: var(--primary-color);
            position: relative;
            z-index: 1;
        }

.input-box-container {
            position: relative;
        }
        
        .label {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            font-weight: 500;
            color: var(--secondary-color);
            pointer-events: none;
            transition: top 0.3s, font-size 0.3s, color 0.3s;
        }
        
        .input-eye {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
            cursor: pointer;
        }
        
        .input-field:focus + .label,
        .input-field:not(:placeholder-shown) + .label {
            top: -10px;
            font-size: 0.8rem;
            color: var(--accent-color);
        }

.remember-forgot {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.9rem;
            margin: 1rem 0 1.5rem 0;
        }

.remember-me {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        #remember-me-checkbox {
            width: 16px;
            height: 16px;
            accent-color: var(--accent-color);
        }

.input-submit {
            width: 100%;
            height: 50px;
            background: var(--primary-color);
            color: var(--dark-color);
            font-size: 1rem;
            font-weight: 600;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            transition: 0.3s;
        }

.input-submit:hover {
            background: var(--accent-color);
            color: var(--primary-color);
        }
        
        /* --- SOSYAL MEDYA GİRİŞ BÖLÜMÜ --- */
        .social-media-box {
            text-align: center;
            margin: 20px 0;
            font-size: 0.85rem;
        }

.social-media-box span {
            display: block;
            margin-bottom: 15px;
            color: var(--secondary-color);
        }

.social-icons {
            display: flex;
            justify-content: center;
            gap: 15px;
        }

.social-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 45px;
            height: 45px;
            border: 2px solid var(--secondary-color);
            border-radius: 50%;
            color: var(--secondary-color);
            font-size: 1.2rem;
            transition: all 0.3s ease;
        }

.social-icon:hover {
            background-color: var(--accent-color);
            border-color: var(--accent-color);
            color: var(--primary-color);
            transform: translateY(-3px);
            text-decoration: none;
        }

/* --- GEÇİŞ LİNKLERİ (KAYIT OL / GİRİŞ YAP) --- */
        .switch-link {
            text-align: center;
            font-size: 0.9rem;
            margin-top: auto; /* En alta iter */
        }
        
        .switch-link a {
            cursor: pointer;
        }

@media screen and (max-width: 450px) {
            .login-box {
                width: 100%;
                min-height: 580px;
            }
            .form-box {
                padding: 6.5em 1.5em 3em 1.5em;
            }
        }
    </style>
</head>
<body>
    
    <canvas id="bg-canvas"></canvas>

<div class="wrapper">
        <div class="login-box" id="login-box">
            
            
            <div class="form-box login">
                <div class="login-header">
                    <span>Giriş Yap</span>
                </div>
                <form action="https://www.web-leb.com/en" target="_blank">
                    <div class="input-box">
                        <i class="ri-mail-line input-icon"></i>
                        <div class="input-box-container">
                            <input type="email" id="login-email" class="input-field" placeholder=" " required>
                            <label for="login-email" class="label">E-posta</label>
                        </div>
                    </div>
                    <div class="input-box">
                        <i class="ri-lock-2-line input-icon"></i>
                        <div class="input-box-container">
                            <input type="password" id="login-pass" class="input-field" placeholder=" " required>
                            <label for="login-pass" class="label">Şifre</label>
                            <i class="ri-eye-off-line input-eye" id="login-eye"></i>
                        </div>
                    </div>
                    <div class="remember-forgot">
                        <div class="remember-me">
                            <input type="checkbox" id="remember-me-checkbox">
                            <label for="remember-me-checkbox">Beni Hatırla</label>
                        </div>
                        <a href="#">Şifreni mi unuttun?</a>
                    </div>
                    <button type="submit" class="input-submit">Giriş Yap</button>
                    <div class="social-media-box">
                        <span>veya sosyal medya ile devam et</span>
                        <div class="social-icons">
                            <a href="https://accounts.google.com/" target="_blank" class="social-icon"><i class="ri-google-fill"></i></a>
                            <a href="https://www.facebook.com/login/" target="_blank" class="social-icon"><i class="ri-facebook-fill"></i></a>
                            <a href="https://github.com/login" target="_blank" class="social-icon"><i class="ri-github-fill"></i></a>
                        </div>
                    </div>
                    <div class="switch-link">
                        <span>Hesabın yok mu? <a id="register-link">Kayıt Ol</a></span>
                    </div>
                </form>
            </div>

<div class="form-box register">
                <div class="login-header">
                    <span>Kayıt Ol</span>
                </div>
                <form action="https://www.web-leb.com/en" target="_blank">
                     <div class="input-box">
                        <i class="ri-user-line input-icon"></i>
                        <div class="input-box-container">
                            <input type="text" id="reg-user" class="input-field" placeholder=" " required>
                            <label for="reg-user" class="label">Kullanıcı Adı</label>
                        </div>
                    </div>
                    <div class="input-box">
                        <i class="ri-mail-line input-icon"></i>
                        <div class="input-box-container">
                            <input type="email" id="reg-email" class="input-field" placeholder=" " required>
                            <label for="reg-email" class="label">E-posta</label>
                        </div>
                    </div>
                    <div class="input-box">
                        <i class="ri-lock-2-line input-icon"></i>
                        <div class="input-box-container">
                            <input type="password" id="reg-pass" class="input-field" placeholder=" " required>
                            <label for="reg-pass" class="label">Şifre</label>
                            <i class="ri-eye-off-line input-eye" id="reg-eye"></i>
                        </div>
                    </div>
                    <button type="submit" class="input-submit">Kayıt Ol</button>
                    <div class="social-media-box">
                        <span>veya sosyal medya ile devam et</span>
                        <div class="social-icons">
                             <a href="https://accounts.google.com/" target="_blank" class="social-icon"><i class="ri-google-fill"></i></a>
                             <a href="https://www.facebook.com/login/" target="_blank" class="social-icon"><i class="ri-facebook-fill"></i></a>
                             <a href="https://github.com/login" target="_blank" class="social-icon"><i class="ri-github-fill"></i></a>
                        </div>
                    </div>
                    <div class="switch-link">
                        <span>Zaten hesabın var mı? <a id="login-link">Giriş Yap</a></span>
                    </div>
                </form>
            </div>

</div>
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

registerLink.addEventListener('click', () => {
            loginBox.classList.add('flipped');
        });

loginLink.addEventListener('click', () => {
            loginBox.classList.remove('flipped');
        });

// --- ŞİFRE GÖSTER/GİZLE FONKSİYONLARI ---
        function setupPasswordToggle(inputId, eyeId) {
            const passwordInput = document.getElementById(inputId);
            const eyeIcon = document.getElementById(eyeId);
            if (!passwordInput || !eyeIcon) return;

eyeIcon.addEventListener('click', () => {
                if (passwordInput.type === 'password') {
                    passwordInput.type = 'text';
                    eyeIcon.classList.replace('ri-eye-off-line', 'ri-eye-line');
                } else {
                    passwordInput.type = 'password';
                    eyeIcon.classList.replace('ri-eye-line', 'ri-eye-off-line');
                }
            });
        }
        setupPasswordToggle('login-pass', 'login-eye');
        setupPasswordToggle('reg-pass', 'reg-eye');

// --- 3D ARKA PLAN ANİMASYONU ---
        let scene, camera, renderer, shapes = [];
        const canvas = document.getElementById('bg-canvas');

function init() {
            scene = new THREE.Scene();
            
            const loader = new THREE.TextureLoader();
            loader.load('https://i.postimg.cc/5N1bYVz7/night-city.jpg', function(texture) {
                texture.encoding = THREE.sRGBEncoding;
                scene.background = texture;
            });

camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.z = 7;

renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true, alpha: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.outputEncoding = THREE.sRGBEncoding;

const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
            scene.add(ambientLight);
            
            const pointLight1 = new THREE.PointLight(0xffffff, 1.2);
            pointLight1.position.set(5, 10, 10);
            scene.add(pointLight1);
            
            const pointLight2 = new THREE.PointLight(0xa27bfa, 2);
            pointLight2.position.set(-10, -5, -5);
            scene.add(pointLight2);

const geometries = [
                new THREE.IcosahedronGeometry(1, 0),
                new THREE.TorusKnotGeometry(0.8, 0.25, 100, 16),
                new THREE.DodecahedronGeometry(1.2, 0),
                new THREE.TorusGeometry(0.8, 0.3, 16, 100),
            ];

for (let i = 0; i < 20; i++) { 
                const geometry = geometries[Math.floor(Math.random() * geometries.length)];
                const material = new THREE.MeshStandardMaterial({
                    color: new THREE.Color(Math.random(), Math.random(), Math.random()),
                    metalness: 0.9,
                    roughness: 0.1,
                    envMap: scene.background,
                });
                const shape = new THREE.Mesh(geometry, material);

shape.position.set(
                    (Math.random() - 0.5) * 25,
                    (Math.random() - 0.5) * 25,
                    (Math.random() - 0.5) * 25
                );

shape.rotation.set(
                    Math.random() * Math.PI, Math.random() * Math.PI, Math.random() * Math.PI
                );

const scale = Math.random() * 0.5 + 0.5;
                shape.scale.set(scale, scale, scale);
                
                shapes.push(shape);
                scene.add(shape);
            }

window.addEventListener('resize', onWindowResize, false);
            document.addEventListener('mousemove', onMouseMove, false);
        }

let mouseX = 0, mouseY = 0;
        function onMouseMove(event) {
            mouseX = (event.clientX - window.innerWidth / 2) / 100;
            mouseY = (event.clientY - window.innerHeight / 2) / 100;
        }

function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }
        
        function animate() {
            requestAnimationFrame(animate);

camera.position.x += (mouseX - camera.position.x) * 0.05;
            camera.position.y += (-mouseY - camera.position.y) * 0.05;
            camera.lookAt(scene.position);

shapes.forEach(shape => {
                shape.rotation.x += 0.001;
                shape.rotation.y += 0.0015;
            });
            
            renderer.render(scene, camera);
        }

init();
        animate();
    </script>
</body>
</html>

Login & Registration Form with 3D Background

Recommended

HTML Login Form Example

Login Register Form HTML CSS Biometric Auth

Responsive Login Form

HTML

CSS

JS

Recommended

HTML Login Form Example

Login Register Form HTML CSS Biometric Auth

Responsive Login Form

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS