HTML/CSS - 3D Multi-Step Form Online Editor and JavaScript Compiler

html

<!--
Inspired By Dribbble Shot 'Sign up 3D' by Oleg Frolov
-The length of the input field for validations is kept short on purpose so users can quickly try filling out various fields to check the effect.
-->
<!DOCTYPE html>
<html>
<head>
    <title>Multi Step 3D Form</title>
    <!--Google Font-->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,500|Poppins&display=swap" rel="stylesheet">
    <!--Material Icon CDN-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
    <!--jQuert CDN-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class="wrapper">
    <div class="container">
        <div class="myform">
            <div class="front">
                <i class="material-icons">
                person
                </i>

css

body{
    background-color: #1A191E;
    padding: 0;
    margin: 0;
}
.wrapper{
    height: 500px;
    width: 350px;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.container{
    height: 100%;
    width: 100%;
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

alert("Try Filling Out the Fields To See The Effect");
$(document).ready(function(){
      $("#btn1").click(function(){
        var username=$(".uname").val();
        if(username.length >= 3 && username.match(/^[a-zA-Z0-9]*$/) && username.length <= 20){
            $(".error").hide();
            $(".myform").addClass('button_spin1');
        }
        else{
            $(".error").text("Invalid Username").show();
        }
      });
      $("#btn2").click(function(){
        var email=$(".email").val();
        if(email.length != 0 && email.match(/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/)){
            $(".error").hide();
            $(".myform").addClass('button_spin2');
        }
        else{
            $(".error").text("Invalid Email").show();
        }
      });
      $("#btn3").click(function(){
        var password=$(".password").val();

BROWSER

Console