Formulario de inicio de sesión y registro 3D HTML CSS

566 anairaiumberdieva

Abrir en el editor Video Publica tu código

Formulario de inicio de sesión y registro 3D HTML CSS

Recomendado

16 September 2025

Formulario HTML de transferencia de monedas con selección de pago

30 November 2024

Animaciones controladas por desplazamiento

19 October 2025

Transformación de formas de partículas con controles en Three.js

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Rotation Login / Signup Box</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/material-icons@1.13.12/iconfont/material-icons.min.css">
</head>
<body>
    <nav class="navbar">
        <div class="container">
            <div class="row justify-content-between align-items-center">
                <div class="logo">Free<span>lancer</span></div>
                <input type="checkbox" name="" id="click">
                <label for="click" class="menu-btn">
                    <i class="material-icons">menu</i>
                </label>
                <ul>
                    <li><a href="#" class="active">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Gallery</a></li>
                    <li><a href="#">Feedback</a></li>
                </ul>
            </div>
        </div>
    </nav>

<section>
        <div class="container">
            <div class="row full-screen align-items-center">
                <div class="left">
                    <span class="line"></span>
                    <h2>Hello, I'm Dawid Wróbel, <br> a <span>Front-end developer</span></h2>
                    <p>Web Design Tutorial using HTML & CSS</p>
                    <a href="#" class="btn">Contact</a>

<div class="social-media">
                        <a href="#"><i class="fa-brands fa-facebook-f"></i></a>
                        <a href="#"><i class="fa-brands fa-x-twitter"></i></a>
                        <a href="#"><i class="fa-brands fa-instagram"></i></a>
                        <a href="#"><i class="fa-brands fa-youtube"></i></a>
                        <a href="#"><i class="fa-brands fa-linkedin-in"></i></a>
                    </div>
                </div>
                <div class="right">
                    <div class="form">
                        <div class="text-center">
                            <h6><span>Log In</span> <span>Sign Up</span></h6>
                            <input type="checkbox" class="checkbox" id="reg-log">
                            <label for="reg-log"></label>
                            <div class="card-3d-wrap">
                                <div class="card-3d-wrapper">
                                    <div class="card-front">
                                        <div class="center-wrap">
                                            <h4 class="heading">Log In</h4>
                                            <div class="form-group">
                                                <input type="email" class="form-style" placeholder="Your Email" autocomplete="off">
                                                <i class="input-icon material-icons">alternate_email</i>
                                            </div>

<a href="#" class="btn">Submit</a>
                                            <p class="text-center"><a href="#" class="link">Forgot your password?</a></p>
                                        </div>
                                    </div>

<div class="card-back">
                                        <div class="center-wrap">
                                            <h4 class="heading">Sign Up</h4>
                                            <div class="form-group">
                                                <input type="text" class="form-style" placeholder="Your Name" autocomplete="off">
                                                <i class="input-icon material-icons">perm_identity</i>
                                            </div>

<div class="form-group">
                                                <input type="email" class="form-style" placeholder="Your Email" autocomplete="off">
                                                <i class="input-icon material-icons">alternate_email</i>
                                            </div>

<a href="#" class="btn">Submit</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>    
                </div>
            </div>
        </div>
    </section>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

:root {
    --mainColor: crimson;
    --black: #000000;
    --white: #FFFFFF;
    --whiteSmoke: #C4C3CA;
    --shadow: 0px 4px 8px 0 rgba(21, 21, 21, .2);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

::before, ::after { box-sizing: border-box; }

body {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    letter-spacing: 1px;
    font-weight: normal;
    background-color: var(--black);
}

a { text-decoration: none; }
ul { list-style: none; }
.container { max-width: 1080px; margin: auto; }
.row { display: flex; flex-wrap: wrap; }
.justify-content-between { justify-content: space-between; }
.align-items-center { align-items: center; }
.full-screen { min-height: 100vh; padding: 80px 0 0; }
.text-center { text-align: center; }

/*NAV*/

nav {
    width: 100%;
    background-color: var(--black);
    position: fixed;
    z-index: 999;
    padding: 25px;
}

nav .logo { color: var(--white); font-size: 32px; font-weight: 600; text-transform: capitalize; }
        nav .logo span { color: var(--mainColor); }
    nav .container { padding: 0 25px; }
    nav .menu-btn i { color: var(--white); font-size: 28px; cursor: pointer; display: none; }
    nav ul { display: flex; flex-wrap: wrap; }
        nav ul li { margin: 0 5px; }
            nav ul li a { 
                color: var(--white); 
                font-size: 16px; 
                font-weight: 600; 
                padding: 8px 15px;
                border-radius: 5px;
                transition: all .3s ease; 
            }
                nav ul li a.active, nav ul li a:hover { color: var(--mainColor); background: var(--white); }

/*MAIN*/

.left, .right { flex: 0 0 50%; max-width: 50%; padding: 20px; }
    .left .line { width: 15%; height: 2px; background-color: var(--mainColor); display: inline-block; }
    .left h2 { margin-top: 25px; font-size: 50px; color: var(--white); line-height: 55px; }
        .left h2 span { color: var(--mainColor); font-size: 52px; }
    .left p { color: var(--whiteSmoke); font-size: 16px; margin-top: 20px; margin-bottom: 10px; }

.btn {
    height: 44px;
    padding: 0px 30px;
    background-color: var(--mainColor);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: var(--white);
    letter-spacing: 1px;
    border: none;
    margin-top: 15px;
    box-shadow: 0px 8px 24px 0 rgba(228, 10, 57, .2);
    transition: all .2s linear;
}

.btn:hover { background-color: var(--white); color: var(--mainColor); box-shadow: 0 8px 24px 0 rgba(138, 140, 146, .2); }

.social-media { margin-top: 60px; }
    .social-media a {
        color: var(--white);
        margin-right: 22px;
        font-size: 22px;
        text-decoration: none;
        transition: all .2s linear;
    }

.social-media a:hover { color: var(--mainColor); }

.form {width: 100%; display: flex; justify-content: center; }
.right h4 { font-weight: 600; color: var(--white); }
.right h6 { color: var(--white); margin-bottom: 30px; } 
    .right h6 span { padding: 0 20px; text-transform: uppercase; font-weight: 700; font-size: 16px; }

input[type="checkbox"] { display: none; }
.checkbox:checked + label, .checkbox:not(:checked) + label { 
    position: relative;
    display: block;
    text-align: center;
    width: 60px;
    height: 16px;
    border-radius: 8px;
    background-color: var(--mainColor);
    padding: 0;
    margin: 10px auto;
    cursor: pointer;
}

.checkbox:checked + label::before, .checkbox:not(:checked) + label::before {
        position: absolute;
        display: block;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        color: var(--mainColor);
        background-color: var(--white);
        font-family: 'Material Icons';
        content: '\f1e2';
        z-index: 20;
        top: -10px;
        left: -10px;
        line-height: 36px;
        text-align: center;
        font-size: 24px;
        transition: all .5s ease;
    }

.checkbox:checked + label::before { transform: translateX(44px) rotate(-270deg); }

.link { color: var(--whiteSmoke); margin-top: 20px; display: block; }
    .link:hover { color: var(--mainColor); }

.card-3d-wrap {
    position: relative;
    width: 400px;
    max-width: 100%;
    height: 400px;
    margin-top: 60px;
    transform-style: preserve-3d;
    perspective: 800px;
}

.card-3d-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform-style: preserve-3d;
    transition: all .6s ease-out;
}

.checkbox:checked ~ .card-3d-wrap .card-3d-wrapper { transform: rotateY(180deg); }

.card-front, .card-back { 
    width: 100%; 
    height: 100%;
    background-color: #1B1B1B; 
    background-image: url('https://i.postimg.cc/4dnZCH03/background.png');
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: 300%;
    position: absolute;
    border-radius: 6px;
    left: 0;
    top: 0;
    transform-style: preserve-3d;
}

.card-back { transform: rotateY(180deg); }

.center-wrap {
    position: absolute;
    width: 100%;
    padding: 0 35px;
    top: 50%;
    left: 0;
    transform: translate3d(0, -50%, 35px) perspective(100px);
    display: block;
    z-index: 20;
}

.heading { margin-bottom: 20px; font-size: 24px; text-transform: uppercase; }
.form-group { position: relative; display: block; margin-bottom: 10px; }
    .form-group input::placeholder { color: var(--whiteSmoke); opacity: .7; transition: all .2s linear; }
        .form-group input:focus::placeholder { opacity: 0; transition: all .2s linear; }

.form-style {
    padding: 13px 20px;
    padding-left: 55px;
    height: 48px;
    width: 100%;
    font-weight: 500;
    border-radius: 4px;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0.5px;
    outline: none;
    color: var(--whiteSmoke);
    background-color: #242323;
    border: none;
    box-shadow: var(--shadow);
}

.form-style:focus, .form-style:active { border: none; outline: none; box-shadow: var(--shadow); }

.input-icon {
    position: absolute;
    top: 12px;
    left: 18px;
    height: 48px;
    font-size: 24px;
    text-align: left;
    color: var(--mainColor);
    transition: all .2s linear;
}

/*MEDIA QUERIES*/

@media (max-width: 992px) {
    nav .menu-btn i { display: block; }
    nav .container { padding: 0; }
    nav ul { 
        position: fixed;
        top: 85px;
        left: -100%;
        background-color: #1B1B1B;
        height: 320px;
        width: 100%;
        display: block;
        text-align: center;
        transition: all .3s ease;
    }

#click:checked ~ ul { left: 0; }
        nav ul li { margin: 20px 0; }
            nav ul li a { display: block; font-size: 20px; }
                nav ul li a.active, nav ul li a:hover { background: none; color: var(--mainColor); }

.left h2 { font-size: 40px; }
        .left h2 span { font-size: 42px; }
    .left p { font-size: 14px; }
    .card-3d-wrap { width: 350px; }
}

@media (max-width: 768px) {
    .left, .right { flex: 0 0 100%; max-width: 100%; }
        .left { display: grid; place-items: center; order: 2;}
        .right { order: 1; }
            .left h2 { text-align: center; }
}

@media (max-width: 400px) {
    .left h2 { font-size: 28px; }
        .left h2 span { font-size: 30px; }
    .card-3d-wrap { width: 300px; }
}

Recomendado

Formulario HTML de transferencia de monedas con selección de pago

Animaciones controladas por desplazamiento

Transformación de formas de partículas con controles en Three.js

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS