Login & Registration Form with 3D Background

1,558 Metehan

/* --- 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>

CSS

Login & Registration Form with 3D Background

Recommended