Frontend Forever

Animated 3D Login Form

About this Code

Hello reader, I am frontendforever. Nice to meet you again in this free code sharing website. In this post I am going to explain about Animated 3D Login Form. If you are new to this website, we recommend you to subscribe to our youtube channel and watch the videos. Ok lets dive into the code.

In the youtube video you’ve clearly seen how this login form looks like and how it show an error when the user tries to log in without entering an email and password or without entering a valid email address. This login form is created only for design purposes so when you entered a valid email & password and click on the login button then these details won’t send or submit anywhere.

If you want to send these details anywhere and want to receive them using PHP then you’ve to put that PHP file URL inside the action attribute of the form tag.

This login form has been animated while you move you cursor in the screen. we detected the cursor movements by using the core vanilla javascript. If you move the cursor the callback function is called. and the function change the login css values. Mainly the function changes the transform property of the html element.

Many of the css animations are made by using the transform properties. So we need to know about the transform is essential to study about css animations

JavaScript Animations

Animations in JavaScript can handle situations that CSS cannot.Animation on a canvas, for instance, or traveling along a convoluted path employing timing functions other than Bezier curves.

What is Login ?

The procedure by which a person receives access to a computer system by identifying and authenticating themselves is known as logging in (or logging on, signing in, or signing on) in the context of computer security. The login is sometimes used to refer to the user credentials, which are normally some kind of username and a password that matches.

What is a login form?

Almost all websites and applications employ login forms. In order to authenticate a user's access, a login form makes use of their credentials. The usual username or email and password are usually included.

History of Login

Although the three phrases (login, logon, and sign-in) have the same meaning, different technical communities tend to choose one over the others. For example, Unix, Novell, Linux, and Apple commonly use login, and Apple's style guide states that "Users log in to a file server (not log on to). In contrast, Microsoft's style manuals have historically recommended the opposite and advised logging on and logging off. In the past, Microsoft only used sign-in for Internet access, but starting with Windows 8, it now uses the sign-in nomenclature for local authentication.

How do I create a beautiful login form?

First step: HTML markup. The HTML component will be the first item we add; it will build the real login form and will have a container, a form, and some inputs
Second step: Setting Up the Components.
Third step: Arranging the components.

That’s all, now you’ve successfully created a Animated 3D Login Form in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

Images

These are the output images of the code. You can click on the image to enlarge it. also you can click the try it button to see the output.

Youtube Tutorial Video

If you are a visual learner and want to learn how to use this code, you can watch the video below.
and also this video contains the clear step by step explanation and the output of the code.

Source Code

This is the source code of the code. You can copy and paste the code to your editor.

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body{
    font-family: sans-serif;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    perspective: 1000px;
}
.container{
    width: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.box{
    min-height: 70vh;
    width: 70%;
    background: black;
    border-radius: 30px;
    box-shadow: 5px 5px 6px rgba(0,0,0,.5),
                -5px -5px 6px rgba(0,0,0,.5);
    flex-wrap: wrap;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
    transition: .2s;
}
h1{
    font-size: 50px;
    color: #FC00FF;
    position: relative;
    margin-left: 1rem;
    display: flex;
    align-items: center;
}
.form{
    min-width: 50%;
    min-height: 50vh;
    color: white;
    transition: all .5s ease-out;
}
label{
    font-size: 20px;
    font-family: Arial;
    line-height: 2;
    font-weight: 500;
    padding-left: 20px;
}
input{
    width: 12rem;
    outline: none;
    border: none;
    color: white;
    background: transparent;
    border-bottom: 1px solid white;
    margin-left: 20px;
    padding-top: 15px;
}
button{
    outline: none;
    display: flex;
    align-items: center;
    padding: 5px 80px;
    border-radius: 30px;
    margin-left: 1rem;
    margin-top: 2rem;
    background: #CF00F0;
    color: white;
}
#man{
    width: 15rem;
    height: 15rem;
    position: relative;
    bottom: -6rem;
    right: 7rem;
    z-index: 2;
    transition: all .5s ease-out;
}
#youtube{
    width: 5rem;
    height: 5rem;
    position: absolute;
    top: 3rem;
    right: 8rem;
    z-index: 5;
    transition: all .5s ease-out;
}
h2{
    position: absolute;
    color: white;
    right: 4rem;
    top: 10rem;
    text-align: center;
    text-shadow: 2px 2px 2px black;
    max-width: 200px;
    font-size: 40px;
    line-height: 1.2;
    z-index: 3;
    transition: all .5s ease-out;
}
.path{
    position: absolute;
    min-height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #00DBDe 0%, #FC00FF 100%);
    clip-path: circle(350px at right 130px);
    border-radius: 30px;
    z-index: 1;
}

const box = document.querySelector('.box');
    const container = document.querySelector('.container');
    const head = document.querySelector('#head');
    const man = document.querySelector('#man');
    const youtube = document.querySelector('#youtube');
    const form = document.querySelector('#form');

container.addEventListener("mousemove" , (e)=>{
        let horizontal = (window.innerWidth / 2 - e.pageX) / 25;
        let vertical = (window.innerHeight / 2 - e.pageY) / 25;
        box.style.transform = `rotateX(${vertical}deg) rotateY(${horizontal}deg)`;
    });

container.addEventListener("mouseenter" , (e)=>{
        box.style.transition= ".1s";
        head.style.transform = "translateZ(120px)";
        man.style.transform = "translateZ(150px)";
        youtube.style.transform = "translateZ(130px)";
        form.style.transform = "translateZ(100px)";
    });

container.addEventListener("mouseleave" , (e)=>{
        box.style.transition= ".1s";
        box.style.transform = "rotateY(0deg) rotateX(0deg)";
        head.style.transform = "translateZ(0px)";
        man.style.transform = "translateZ(0px)";
        youtube.style.transform = "translateZ(0px)";
        form.style.transform = "translateZ(0px)";
    });

And also you can click the try it button to see the output of the code in our web Code Playground.
You can also download the code to the zip format by clicking the download button. The download process is little bit complex, you need ti await for 10 seconds. after that you can download the code by clicking the generated download link.

Download

Try It

Frontend Forever

Animated 3D Login Form

About this Code