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é

Code de la barre de navigation HTML CSS

Système solaire animé avec toutes les planètes

recrutement des forces spéciales

HTML

CSS

JS

Recommandé

Code de la barre de navigation HTML CSS

Système solaire animé avec toutes les planètes

recrutement des forces spéciales

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS