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

1359 mohkerrouche9

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

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

अनुशंसित

25 January 2026

रफ़ल फ़्लैश गेम प्लेयर HTML टेम्पलेट

23 August 2025

तुर्की लॉगिन पृष्ठ HTML और CSS कोड

18 October 2025

होवर प्रभाव के साथ HTML बटन (WEBLEB)

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 टेम्पलेट

तुर्की लॉगिन पृष्ठ HTML और CSS कोड

होवर प्रभाव के साथ HTML बटन (WEBLEB)

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS