Create A 3D Login Form In HTML 5

Introduction

 
In this article, I will demonstrate how to develop a 3D login form using HTML 5. In this section, a 3D login form will rotate and shake while displaying in the browser.
 
Here you will use some JavaScript and styles along with HTML code. Just follow the steps to see how to create this Login Form.
 
Let's see how the 3D Login Form can be created. 
 
Step 1
 
Open a Sublime text editor.
 
Step 2

In this section, you will create the animation script for the login form and create the .css on the form. Add the given script in the Head section of the HTML tags. Here the CSS is used for animation and style purposes.
 
Css Style
  1. <style>  
  2. .form {  
  3.   marginauto;  
  4.   width400px;  
  5.   padding20px 30px;  
  6.   backgroundblue;  
  7.   outlinewhite;  
  8.   border20px solid #dfdfdf;  
  9.   -webkit-transform-style: preserve-3d;  
  10.           transform-style: preserve-3d;  
  11.   -webkit-perspective-origin: 50px center;  
  12.           perspective-origin: 50px center;  
  13.   -webkit-perspective: 2000px;  
  14.           perspective: 2000px;  
  15.   transition: -webkit-transform 1s ease;  
  16.   transition: transform 1s ease;  
  17.   transition: transform 1s ease, -webkit-transform 1s ease;  
  18. }  
  19. .form::before, .form::after {  
  20.   content"";  
  21.   positionabsolute;  
  22.   width100%;  
  23.   left: 0;  
  24. }  
  25. .form::before {  
  26.   height100%;  
  27.   top: 0;  
  28.   -webkit-transform: translateZ(-100px);  
  29.           transform: translateZ(-100px);  
  30.   background#333;  
  31.   opacity: 0.3;  
  32. }  
  33. .form::after {  
  34.   content"SUCCESS!";  
  35.   -webkit-transform: translateY(-50%) translateZ(-101px) scaleX(-1);  
  36.           transform: translateY(-50%) translateZ(-101px) scaleX(-1);  
  37.   top: 50%;  
  38.   color#fff;  
  39.   text-aligncenter;  
  40.   font-weightbold;  
  41. }  
  42.   
  43. .field {  
  44.   positionrelative;  
  45.   background#cfcfcf;  
  46.   -webkit-transform-style: preserve-3d;  
  47.           transform-style: preserve-3d;  
  48. }  
  49. .field + .field {  
  50.   margin-top10px;  
  51. }  
  52.   
  53. .icon {  
  54.   width24px;  
  55.   height24px;  
  56.   positionabsolute;  
  57.   top: calc(50% - 12px);  
  58.   left: 12px;  
  59.   -webkit-transform: translateZ(50px);  
  60.           transform: translateZ(50px);  
  61.   -webkit-transform-style: preserve-3d;  
  62.           transform-style: preserve-3d;  
  63. }  
  64. .icon::before, .icon::after {  
  65.   content"";  
  66.   displayblock;  
  67.   width100%;  
  68.   height100%;  
  69.   positionabsolute;  
  70.   top: 0;  
  71.   left: 0;  
  72. }  
  73. .icon::after {  
  74.   -webkit-transform: translateZ(-23px);  
  75.           transform: translateZ(-23px);  
  76.   opacity: 0.5;  
  77. }  
  78.   
  79. .input {  
  80.   border1px solid #dfdfdf;  
  81.   background#fff;  
  82.   height48px;  
  83.   line-height48px;  
  84.   padding0 10px 0 48px;  
  85.   width100%;  
  86.   -webkit-transform: translateZ(26px);  
  87.           transform: translateZ(26px);  
  88. }  
  89.   
  90. .button {  
  91.   displayblock;  
  92.   width100%;  
  93.   border0;  
  94.   text-aligncenter;  
  95.   font-weightbold;  
  96.   color#fff;  
  97.   background: linear-gradient(45deg, #e53935#e35d5b);  
  98.   margin-top20px;  
  99.   padding14px;  
  100.   positionrelative;  
  101.   -webkit-transform-style: preserve-3d;  
  102.           transform-style: preserve-3d;  
  103.   -webkit-transform: translateZ(26px);  
  104.           transform: translateZ(26px);  
  105.   transition: -webkit-transform 0.3s ease;  
  106.   transition: transform 0.3s ease;  
  107.   transition: transform 0.3s ease, -webkit-transform 0.3s ease;  
  108.   cursorpointer;  
  109. }  
  110. .button:hover {  
  111.   -webkit-transform: translateZ(13px);  
  112.           transform: translateZ(13px);  
  113. }  
  114.   
  115. .side-top-bottom {  
  116.   width100%;  
  117. }  
  118. .side-top-bottom::before, .side-top-bottom::after {  
  119.   content"";  
  120.   width100%;  
  121.   height26px;  
  122.   background: linear-gradient(45deg, #e2231e#df4745);  
  123.   positionabsolute;  
  124.   left: 0;  
  125. }  
  126. .side-top-bottom::before {  
  127.   -webkit-transform-origin: center top;  
  128.           transform-origin: center top;  
  129.   -webkit-transform: translateZ(-26px) rotateX(90deg);  
  130.           transform: translateZ(-26px) rotateX(90deg);  
  131.   top: 0;  
  132. }  
  133. .side-top-bottom::after {  
  134.   -webkit-transform-origin: center bottom;  
  135.           transform-origin: center bottom;  
  136.   -webkit-transform: translateZ(-26px) rotateX(-90deg);  
  137.           transform: translateZ(-26px) rotateX(-90deg);  
  138.   bottom: 0;  
  139. }  
  140.   
  141. .side-left-right {  
  142.   height100%;  
  143. }  
  144. .side-left-right::before, .side-left-right::after {  
  145.   content"";  
  146.   height100%;  
  147.   width26px;  
  148.   positionabsolute;  
  149.   top: 0;  
  150. }  
  151. .side-left-right::before {  
  152.   background#e53935;  
  153.   -webkit-transform-origin: left center;  
  154.           transform-origin: left center;  
  155.   -webkit-transform: rotateY(90deg);  
  156.           transform: rotateY(90deg);  
  157.   left: 0;  
  158. }  
  159. .side-left-right::after {  
  160.   background#e35d5b;  
  161.   -webkit-transform-origin: right center;  
  162.           transform-origin: right center;  
  163.   -webkit-transform: rotateY(-90deg);  
  164.           transform: rotateY(-90deg);  
  165.   right: 0;  
  166. }  
  167.   
  168. .email .icon::before, .email .icon::after {  
  169.   backgroundurl(https://image.flaticon.com/icons/svg/131/131040.svg) center/contain no-repeat;  
  170. }  
  171.   
  172. .password .icon::before, .password .icon::after {  
  173.   backgroundurl(https://image.flaticon.com/icons/svg/130/130996.svg) center/contain no-repeat;  
  174. }  
  175.   
  176. .face-up-left {  
  177.   -webkit-transform: rotateY(-30deg) rotateX(30deg);  
  178.           transform: rotateY(-30deg) rotateX(30deg);  
  179. }  
  180.   
  181. .face-up-right {  
  182.   -webkit-transform: rotateY(30deg) rotateX(30deg);  
  183.           transform: rotateY(30deg) rotateX(30deg);  
  184. }  
  185.   
  186. .face-down-left {  
  187.   -webkit-transform: rotateY(-30deg) rotateX(-30deg);  
  188.           transform: rotateY(-30deg) rotateX(-30deg);  
  189. }  
  190.   
  191. .face-down-right {  
  192.   -webkit-transform: rotateY(30deg) rotateX(-30deg);  
  193.           transform: rotateY(30deg) rotateX(-30deg);  
  194. }  
  195.   
  196. .form-complete {  
  197.   -webkit-animation: formComplete 2s ease;  
  198.           animation: formComplete 2s ease;  
  199. }  
  200.   
  201. .form-error {  
  202.   -webkit-animation: formError 2s ease;  
  203.           animation: formError 2s ease;  
  204. }  
  205.   
  206. input:active, input:focus, button:active, button:focus {  
  207.   outlinenone;  
  208.   border1px solid #e77371;  
  209. }  
  210.   
  211. @-webkit-keyframes formComplete {  
  212.   50%55% {  
  213.     -webkit-transform: rotateX(30deg) rotateY(180deg);  
  214.             transform: rotateX(30deg) rotateY(180deg);  
  215.   }  
  216.   100% {  
  217.     -webkit-transform: rotateX(0deg) rotateY(1turn);  
  218.             transform: rotateX(0deg) rotateY(1turn);  
  219.   }  
  220. }  
  221.   
  222. @keyframes formComplete {  
  223.   50%55% {  
  224.     -webkit-transform: rotateX(30deg) rotateY(180deg);  
  225.             transform: rotateX(30deg) rotateY(180deg);  
  226.   }  
  227.   100% {  
  228.     -webkit-transform: rotateX(0deg) rotateY(1turn);  
  229.             transform: rotateX(0deg) rotateY(1turn);  
  230.   }  
  231. }  
  232. @-webkit-keyframes formError {  
  233.   0%100% {  
  234.     -webkit-transform: rotateX(0deg) rotateY(0deg);  
  235.             transform: rotateX(0deg) rotateY(0deg);  
  236.   }  
  237.   25% {  
  238.     -webkit-transform: rotateX(-25deg);  
  239.             transform: rotateX(-25deg);  
  240.   }  
  241.   33% {  
  242.     -webkit-transform: rotateX(-25deg) rotateY(45deg);  
  243.             transform: rotateX(-25deg) rotateY(45deg);  
  244.   }  
  245.   66% {  
  246.     -webkit-transform: rotateX(-25deg) rotateY(-30deg);  
  247.             transform: rotateX(-25deg) rotateY(-30deg);  
  248.   }  
  249. }  
  250. @keyframes formError {  
  251.   0%100% {  
  252.     -webkit-transform: rotateX(0deg) rotateY(0deg);  
  253.             transform: rotateX(0deg) rotateY(0deg);  
  254.   }  
  255.   25% {  
  256.     -webkit-transform: rotateX(-25deg);  
  257.             transform: rotateX(-25deg);  
  258.   }  
  259.   33% {  
  260.     -webkit-transform: rotateX(-25deg) rotateY(45deg);  
  261.             transform: rotateX(-25deg) rotateY(45deg);  
  262.   }  
  263.   66% {  
  264.     -webkit-transform: rotateX(-25deg) rotateY(-30deg);  
  265.             transform: rotateX(-25deg) rotateY(-30deg);  
  266.   }  
  267. }  
  268. small {  
  269.   color#999;  
  270.   text-aligncenter;  
  271.   displayblock;  
  272.   margin-top20px;  
  273.   -webkit-backface-visibilityhidden;  
  274.           backface-visibilityhidden;  
  275. }  
  276.   
  277. html, body {  
  278.   width100%;  
  279.   height100%;  
  280.   display: flex;  
  281.   background: linear-gradient(45deg, #83a4d4#b6fbff);  
  282. }  
  283.   
  284. *, *::before, *::after {  
  285.   box-sizing: border-box;  
  286. }  
  287. </style> 
Step 3

In this section, you need to insert some JavaScript. 

You can see below all the code for JavaScript:
  1. <script>  
  2.   
  3. var formAnim = {  
  4.     $form: $('#form'),  
  5.     animClasses: ['face-up-left''face-up-right''face-down-left''face-down-right''form-complete''form-error'],  
  6.     resetClasses: function() {  
  7.         var $form = this.$form;  
  8.           
  9.         $.each(this.animClasses, function(k, c) {  
  10.             $form.removeClass(c);  
  11.         });  
  12.     },  
  13.     faceDirection: function(d) {  
  14.         this.resetClasses();  
  15.           
  16.         d = parseInt(d) < this.animClasses.length? d : -1;  
  17.           
  18.         if(d >= 0) {  
  19.             this.$form.addClass(this.animClasses[d]);  
  20.         }   
  21.     }  
  22. }  
  23.   
  24. var $input = $('#email, #password'),  
  25.         $submit = $('#submit'),  
  26.         focused = false,  
  27.         completed = false;  
  28.   
  29.   
  30. $input.focus(function() {  
  31.     focused = true;  
  32.       
  33.     if(completed) {  
  34.         formAnim.faceDirection(1);  
  35.     } else {  
  36.         formAnim.faceDirection(0);  
  37.     }  
  38. });  
  39.   
  40. $input.blur(function() {  
  41.     formAnim.resetClasses();  
  42. });  
  43.   
  44. $input.on('input paste keyup'function() {  
  45.     completed = true;  
  46.       
  47.     $input.each(function() {  
  48.         if(this.value == '') {  
  49.             completed = false;  
  50.         }  
  51.     });  
  52.       
  53.     if(completed) {  
  54.         formAnim.faceDirection(1);  
  55.     } else {  
  56.         formAnim.faceDirection(0);  
  57.     }  
  58. });  
  59.   
  60. $submit.click(function() {  
  61.     focused = true;  
  62.     formAnim.resetClasses();  
  63.       
  64.     if(completed) {  
  65.         $submit.css('pointer-events''none');  
  66.         setTimeout(function() {  
  67.             formAnim.faceDirection(4);  
  68.             $input.val('');  
  69.             completed = false;  
  70.   
  71.             setTimeout(function() {  
  72.                 $submit.css('pointer-events''');  
  73.                 formAnim.resetClasses();  
  74.             }, 2000);  
  75.         }, 1000);  
  76.     } else {  
  77.         setTimeout(function() {  
  78.             formAnim.faceDirection(5);  
  79.   
  80.             setTimeout(function() {  
  81.                 formAnim.resetClasses();  
  82.             }, 2000);  
  83.         }, 1000);  
  84.     }  
  85. });  
  86.   
  87. $(function() {  
  88.     setTimeout(function() {  
  89.         if(!focused) {  
  90.             $input.eq(0).focus();  
  91.         }  
  92.     }, 2000);  
  93. })  
  94.   
  95. </script> 
Step 4
 
The  Html 5 code below shows how to complete code for the 3D Login Form.
  1. <!DOCTYPE html>  
  2. <html lang="en" >  
  3.   
  4. <head>  
  5.   <meta charset="UTF-8">  
  6.   <title>3D login form </title>  
  7.     
  8.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">  
  9.       <link rel="stylesheet" href="css/style.css">  
  10. </head>  
  11.   
  12. <body>  
  13. <div class="form" id="form">  
  14.   
  15.       <h1>LOGIN HERE</h1>  
  16.     
  17.   <div class="field email">  
  18.   
  19.     <div class="icon"></div>  
  20.   
  21.     <input class="input" id="email" type="email" placeholder="ID" autocomplete="off"/>  
  22.   </div>  
  23.   <div class="field password">  
  24.     <div class="icon"></div>  
  25.     <input class="input" id="password" type="password" placeholder="PASSWORD"/>  
  26.   </div>  
  27.   <button class="button" id="submit">SIGN IN  
  28.     <div class="side-top-bottom"></div>  
  29.     <div class="side-left-right"></div>  
  30.   </button><small>Detailes Required</small>  
  31. </div>  
  32.   <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>  
  33.  
  34.     <script  src="js/index.js"></script>  
  35. </body>  
  36.   
  37. </html> 

Output


right-click on the sublime text window stage, a dialog box appears, select->open a new browser,
 
You must have the Firebox browser on your PC. You will see the 3D Login Form rotate and shake as we run the application in the browser.
 
 Create A 3D Login Form In HTML 5
 
Create A 3D Login Form In HTML 5 
 

Summary

 
I hope you understood this article. We have created a 3D Login Form. Thanks for reading, and have a nice day  :)