Webleb - Snippets de Código - Menu de hambúrguer com login 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 de hambúrguer com login 3D

Recomendado

Um código por cleanscript406

Código CSS HTML JavaScript para Smartwatch 3D

botão iraniano

HTML

CSS

JS

Recomendado

Um código por cleanscript406

Código CSS HTML JavaScript para Smartwatch 3D

botão iraniano

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS