Webleb - Extraits de Code - Menu hamburger de connexion 3D

HTML

<!DOCTYPE html>

<head>

<title>3D Giriş & Kayıt Formu</title>

<style>

:root {

--primary: #3498db;

--secondary: #2ecc71;

--dark: #2c3e50;

--light: #ecf0f1;

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

body {

background-color: var(--dark);

color: var(--light);

min-height: 100vh;

display: flex;

justify-content: center;

align-items: center;

perspective: 1000px;

}

.container {

position: relative;

width: 800px;

height: 500px;

transition: all 0.5s ease;

transform-style: preserve-3d;

}

/* 3D Flip Efekti */

.container.flipped {

transform: rotateY(180deg);

}

.form-container {

position: absolute;

width: 100%;

height: 100%;

backface-visibility: hidden;

border-radius: 20px;

overflow: hidden;

box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);

background: rgba(255, 255, 255, 0.1);

backdrop-filter: blur(10px);

border: 1px solid rgba(255, 255, 255, 0.2);

padding: 40px;

display: flex;

}

/* Giriş Formu */

.login-form {

transform: none;

z-index: 2;

}

/* Kayıt Formu */

.register-form {

transform: rotateY(180deg);

z-index: 1;

}

.form-content {

flex: 1;

display: flex;

flex-direction: column;

justify-content: center;

}

.form-figures {

flex: 1;

position: relative;

display: flex;

justify-content: center;

align-items: center;

}

.figure {

position: absolute;

border-radius: 50%;

background: linear-gradient(45deg, var(--primary), var(--secondary));

opacity: 0.3;

filter: blur(30px);

}

.figure-1 {

width: 150px;

height: 150px;

top: 20px;

left: 50px;

}

.figure-2 {

width: 200px;

height: 200px;

bottom: 30px;

right: 40px;

}

h2 {

font-size: 2rem;

margin-bottom: 30px;

color: white;

text-align: center;

}

.input-group {

margin-bottom: 20px;

position: relative;

}

.input-group i {

position: absolute;

left: 15px;

top: 50%;

transform: translateY(-50%);

color: var(--light);

}

.input-group input {

width: 100%;

padding: 15px 15px 15px 45px;

background: rgba(255, 255, 255, 0.1);

border: none;

border-radius: 30px;

color: white;

font-size: 1rem;

outline: none;

transition: all 0.3s;

}

.input-group input:focus {

background: rgba(255, 255, 255, 0.2);

}

.btn {

background: linear-gradient(45deg, var(--primary), var(--secondary));

color: white;

border: none;

padding: 15px;

border-radius: 30px;

cursor: pointer;

font-size: 1rem;

font-weight: bold;

margin-top: 10px;

transition: all 0.3s;

}

.btn:hover {

transform: translateY(-3px);

box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

}

.toggle-form {

text-align: center;

margin-top: 20px;

}

.toggle-btn {

background: none;

border: none;

color: var(--light);

cursor: pointer;

text-decoration: underline;

font-size: 0.9rem;

}

.slider-container {

position: absolute;

bottom: 30px;

left: 0;

right: 0;

display: flex;

justify-content: center;

}

.slider-dot {

width: 10px;

height: 10px;

border-radius: 50%;

background: rgba(255, 255, 255, 0.3);

margin: 0 5px;

cursor: pointer;

transition: all 0.3s;

}

.slider-dot.active {

background: white;

transform: scale(1.3);

}

.social-login {

display: flex;

justify-content: center;

margin-top: 20px;

}

.social-icon {

width: 40px;

height: 40px;

border-radius: 50%;

background: rgba(255, 255, 255, 0.1);

display: flex;

justify-content: center;

align-items: center;

margin: 0 10px;

color: white;

cursor: pointer;

transition: all 0.3s;

}

.social-icon:hover {

background: rgba(255, 255, 255, 0.2);

transform: translateY(-3px);

}

</style>

</head>

<body>

<h2>Giriş Yap</h2>

</div>

</div>

<button class="btn">Giriş Yap</button>

<button class="toggle-btn" onclick="flipContainer()">Hesabınız yok mu? Üye Olun</button>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<button class="btn">Kayıt Ol</button>

<button class="toggle-btn" onclick="flipContainer()">Zaten hesabınız var mı? Giriş Yapın</button>

</div>

</div>

</div>

// 3D Flip Fonksiyonu

function flipContainer() {

document.getElementById('container').classList.toggle('flipped');

}

// Slider Fonksiyonları

let currentSlide = 0;

const slides = document.querySelectorAll('.form-container');

const dots = document.querySelectorAll('.slider-dot');

function goToSlide(n) {

currentSlide = n;

updateSlider();

}

function updateSlider() {

slides.forEach((slide, index) => {

if(index === currentSlide) {

slide.style.opacity = '1';

slide.style.zIndex = '2';

} else {

slide.style.opacity = '0';

slide.style.zIndex = '1';

}

});

dots.forEach((dot, index) => {

dot.classList.toggle('active', index === currentSlide);

});

}

// Otomatik slider geçişi

setInterval(() => {

currentSlide = (currentSlide + 1) % slides.length;

updateSlider();

}, 5000);

</script>

</body>

</html>

Menu hamburger de connexion 3D

Recommandé

Application météo

Morphing de forme de particules Three.js avec contrôles

Un code de Metehan

HTML

CSS

JS

Recommandé

Application météo

Morphing de forme de particules Three.js avec contrôles

Un code de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS