Formulário de registro de login HTML com efeito de cartão 3D

40 mohkerrouche9

Abrir no Editor Publique Seu Código

Formulário de registro de login HTML com efeito de cartão 3D

Recomendado

28 December 2024

Uma página inicial de matriz criada com índices

4 December 2024

Controle deslizante de cartão animado expansível

19 October 2024

Código da barra de navegação HTML CSS

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);
}

Recomendado

Uma página inicial de matriz criada com índices

Controle deslizante de cartão animado expansível

Código da barra de navegação HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS