3D कार्ड प्रभाव के साथ HTML लॉगिन पंजीकरण फ़ॉर्म

34 mohkerrouche9

संपादक में खोलें अपना कोड प्रकाशित करें

3D कार्ड प्रभाव के साथ HTML लॉगिन पंजीकरण फ़ॉर्म

अनुशंसित

20 May 2025

आधुनिक ग्लासमोर्फिज्म लॉगिन फॉर्म html, css में

14 June 2023

सीएसएस टीम मेम्बर्स कार्ड

28 March 2025

कोडपेन होम आउटलाइन मोबाइल कार्ड

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="3d-auth.css">
</head>
    <body>
        <div class="auth-container">
            
            <div class="auth-form login-form">
                <div class="auth-card main-card">
                    <h2>Вход</h2>
                    <div class="card-content">
                        <div class="auth-input">
                            <input type="text" placeholder="Логин">
                            <input type="password" placeholder="Пароль">
                        </div>
                        <button class="auth-button" id="login-button">Войти</button>
                        <a id="forgot-password">Забыли пароль?</a>
                    </div>
                </div>
            </div>

<div class="auth-form register-form">
                <div class="auth-card">
                    <h2>Регистрация</h2>
                    <div class="card-content">
                        <div class="auth-input">
                            <input type="text" placeholder="Логин">
                            <input type="email" placeholder="Email">
                            <input type="password" placeholder="Пароль">
                            <input type="password" placeholder="Повторите пароль">
                        </div>
                        <button class="auth-button" id="register-button">Зарегистрироваться</button>
                    </div>
                </div>
            </div>

<div class="recovery-card">
                <h2>Восстановление</h2>
                <div class="card-content">
                    <div class="auth-input">
                        <input type="email" placeholder="Введите email">
                    </div>
                    <button class="auth-button" id="recovery-button">Отправить</button>
                    <a class="back-to-login">Вернуться назад</a>
                </div>
            </div>

<div class="verification-card">
                <h2>Подтверждение</h2>
                <div class="card-content">
                    <div class="auth-input">
                        <input type="text" placeholder="Введите код из письма">
                    </div>
                    <button class="auth-button">Подтвердить</button>
                    <a class="back-to-recovery">Вернуться назад</a>
                </div>
            </div>
        </div>
        <script>
            document.getElementById('forgot-password').addEventListener('click', function() {
                document.querySelector('.auth-container').classList.add('show-recovery');
            });

document.querySelector('.back-to-login').addEventListener('click', function() {
                document.querySelector('.auth-container').classList.remove('show-recovery');
                document.querySelector('.auth-container').classList.remove('show-verification');
            });

document.getElementById('recovery-button').addEventListener('click', function() {
                document.querySelector('.auth-container').classList.add('show-verification');
            });

document.querySelector('.back-to-recovery').addEventListener('click', function() {
                document.querySelector('.auth-container').classList.remove('show-verification');
            });

document.querySelectorAll('.login-form, .register-form, .recovery-card, .verification-card').forEach(card => {
                let bounds;

const handleMove = (e) => {
                    const rect = card.getBoundingClientRect();
                    
                    // Вычисляем позицию мыши относительно центра карточки
                    const mouseX = e.clientX - (rect.left + rect.width / 2);
                    const mouseY = e.clientY - (rect.top + rect.height / 2);
                    
                    // Вычисляем углы поворота
                    const rotateX = (mouseY / (rect.height / 2)) * -10;
                    const rotateY = (mouseX / (rect.width / 2)) * 10;
                    
                    // Применяем трансформацию
                    card.style.transform = `
                        perspective(1000px)
                        rotateX(${rotateX}deg)
                        rotateY(${rotateY}deg)
                        translateZ(10px)
                    `;

// Обновляем эффект блика
                    const glare = card.querySelector('.card-glare');
                    if (glare) {
                        const glareX = ((e.clientX - rect.left) / rect.width) * 100;
                        const glareY = ((e.clientY - rect.top) / rect.height) * 100;
                        glare.style.background = `
                            radial-gradient(
                                circle at ${glareX}% ${glareY}%,
                                rgba(255, 255, 255, 0.08) 0%,
                                rgba(255, 255, 255, 0.03) 25%,
                                rgba(255, 255, 255, 0) 50%
                            )
                        `;
                    }
                };

const handleLeave = () => {
                    let CardRotate = 0;
                    let CardTranslateX = 0;

if(card.classList.contains('login-form')){
                        CardRotate = 25;
                        CardTranslateX = -50;
                    } else if(card.classList.contains('register-form')){
                        CardRotate = -25;
                        CardTranslateX = 50;
                    } else if(card.classList.contains('recovery-card')){
                        CardRotate = 0;
                        CardTranslateX = 0;
                    } else if(card.classList.contains('verification-card')){
                        CardRotate = 0;
                        CardTranslateX = 0;
                    } else {
                        CardRotate = 0;
                        CardTranslateX = 0;
                    }

// Плавно возвращаем в исходное положение
                    card.style.transform = `
                        perspective(1000px)
                        rotateX(0deg)
                        rotateY(${CardRotate}deg)
                        translateX(${CardTranslateX}px)
                        translateY(0)
                        translateZ(-100px)
                    `;

const glare = card.querySelector('.card-glare');
                    if (glare) {
                        glare.style.background = 'none';
                    }
                };

// Добавляем слушатели событий
                card.addEventListener('mousemove', handleMove);
                card.addEventListener('mouseleave', handleLeave);

// Добавляем элемент для блика
                const glare = document.createElement('div');
                glare.className = 'card-glare';
                card.appendChild(glare);
            });
        </script>
    </body>
</html>

CSS

:root {
    --bg: #101010;
    --auth-bg: #101010;
    --auth-text: #fff;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: linear-gradient(
        350deg,
        #5b72f3, #8B9BFA, #6B7280, #4B5563,
        #395375, #373d80, #203552, #1E3A8A,
        #3c65d6, #33569c, #162b53, #18243a,
        #3b5996, #375daa, #103c94, #2c426d
    );
    background-size: 400% 400%;
    animation: gradient 30s ease infinite;
}

@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.auth-form{
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    margin: 0 8rem 0 8rem;
    padding: 40px;
    transform-style: preserve-3d;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.1),
        inset 0 0 80px rgba(255, 255, 255, 0.05),
        inset 0 0 20px rgba(255, 255, 255, 0.05),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    position: relative;
}

.auth-container{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    perspective: 2000px;
}

.card-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.auth-button{
    position: relative;
    width: 200px;
    margin: 25px 0;
    padding: 15px 30px;
    font-size: 1.1rem;
    font-weight: 500;
    color: #ffffff;
    background: linear-gradient(135deg, #ff6b6b, #ff4757);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 
        0 5px 15px rgba(255, 71, 87, 0.3),
        inset 0 0 15px rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.auth-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: 0.5s;
}

.auth-button:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 8px 25px rgba(255, 71, 87, 0.4),
        inset 0 0 20px rgba(255, 255, 255, 0.2);
}

.auth-button:hover::before {
    left: 100%;
}

#forgot-password {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    text-decoration: none;
    margin-top: 15px;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    cursor: pointer;
}

#forgot-password::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -2px;
    left: 0;
    background: rgba(255, 255, 255, 0.3);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

#forgot-password:hover {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

#forgot-password:hover::after {
    transform: scaleX(1);
}

.auth-card{
    padding: 20px;
    position: relative;
    transform-style: preserve-3d;
    z-index: 1;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    backface-visibility: hidden;
}

.recovery-card h2,
.verification-card h2,
.auth-card h2 {
    color: #ffffff;
    font-size: 2rem;
    margin-bottom: 30px;
    text-align: center;
    font-weight: 600;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    letter-spacing: 1px;
}

.auth-input{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}
.auth-input input{
    width: calc(100% - 20px);
    font-size: 1rem;
    margin: 12px 0;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    color: #fff;
    transition: all 0.3s ease;
}
.auth-input input::placeholder{
    color: #fff;
}

.auth-input input:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.auth-input input:focus{
    outline: none;
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 
        0 0 20px rgba(255, 255, 255, 0.1),
        inset 0 0 10px rgba(255, 255, 255, 0.05);
    transform: translateZ(5px);
}

.login-form {
    transform: rotateY(25deg) translateZ(-100px) translateX(-50px);
}

.register-form {
    transform: rotateY(-25deg) translateZ(-100px) translateX(50px);
}

.login-form:hover {
    transform: rotateY(15deg) translateZ(50px) translateX(30px);
    box-shadow: -20px 20px 40px rgba(0, 0, 0, 0.3);
    background: rgba(25, 25, 25, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.register-form:hover {
    transform: rotateY(-15deg) translateZ(50px) translateX(-30px);
    box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.3);
    background: rgba(25, 25, 25, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Обновляем стили для карточек */
.auth-card {
    padding: 20px;
    position: relative;
    transform-style: preserve-3d;
    z-index: 1;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    backface-visibility: hidden;
}

/* Стили для основной карточки */
.main-card {
    transform: translateZ(0);
}

/* Добавляем анимации для карточек */
@keyframes endpoint-recovery {
    0% {
        opacity: 0;
        visibility: visible;
        transform: translate(-50%, -50%) rotateY(0deg) translateZ(-100px);
    }
    100% {
        opacity: 1;
        visibility: visible;
        transform: rotateY(-25deg) translateZ(-100px) translateX(100%) translateY(-50%);
    }
}

@keyframes endpoint-verification {
    0% {
        opacity: 0;
        visibility: visible;
        transform: translate(50%, -50%) rotateY(0deg) translateZ(-100px);
    }
    100% {
        opacity: 1;
        visibility: visible;
        transform: rotateY(25deg) translateZ(-100px) translateX(-50px) translateY(-50%);
    }
}

/* Обновляем стили для карточки восстановления */
.recovery-card {
    position: absolute;
    top: 50%;
    left: 35%; /* Центрируем карточку */
    padding: 40px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) rotateY(0deg) translateZ(-100px);
    transition: none; /* Убираем transition, будем использовать animation */
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.1),
        inset 0 0 80px rgba(255, 255, 255, 0.05);
}

/* Обновляем стили для карточки верификации */
.verification-card {
    position: absolute;
    top: 50%;
    left: 35%; /* Центрируем карточку */
    padding: 40px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) rotateY(0deg) translateZ(-100px);
    transition: none; /* Убираем transition, будем использовать animation */
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.1),
        inset 0 0 80px rgba(255, 255, 255, 0.05);
}

/* Применяем анимации при показе карточек */
.show-recovery .recovery-card {
    animation: endpoint-recovery 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.show-verification .verification-card {
    animation: endpoint-verification 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

/* Обновляем поведение карточки восстановления при показе верификации */
.show-verification .recovery-card {
    transform: rotateY(-35deg) translateZ(-100px) translateX(50%) translateY(-50%);
}

/* Стили для кнопки "Вернуться назад" */
.back-to-login {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    text-decoration: none;
    margin-top: 15px;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.back-to-login::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -2px;
    left: 0;
    background: rgba(255, 255, 255, 0.3);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.back-to-login:hover {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.back-to-login:hover::after {
    transform: scaleX(1);
}

/* Стили для кнопки "Вернуться к восстановлению" */
.back-to-recovery {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    text-decoration: none;
    margin-top: 15px;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.back-to-recovery::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -2px;
    left: 0;
    background: rgba(255, 255, 255, 0.3);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.back-to-recovery:hover {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.back-to-recovery:hover::after {
    transform: scaleX(1);
}

अनुशंसित

आधुनिक ग्लासमोर्फिज्म लॉगिन फॉर्म html, css में

सीएसएस टीम मेम्बर्स कार्ड

कोडपेन होम आउटलाइन मोबाइल कार्ड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS