Webleb - Code-Snippets - 3d login hamburger menü

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 login hamburger menü

Empfohlen

CSS Aurora

Ein Code von smartfunction263

Ein Code von alejandrokundrah

HTML

CSS

JS

Empfohlen

CSS Aurora

Ein Code von smartfunction263

Ein Code von alejandrokundrah

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS