Webleb - कोड स्निपेट्स - 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>

3D लॉगिन हैमबर्गर मेनू

अनुशंसित

मेटे का एक कोड

एनिमेटेड लॉगिन फॉर्म

सीएसएस मुक्त बटन एनीमेशन

HTML

CSS

JS

अनुशंसित

मेटे का एक कोड

एनिमेटेड लॉगिन फॉर्म

सीएसएस मुक्त बटन एनीमेशन

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS