September 15, 2024
Hot News

Cool 3D Animated Signin, Signup, Forget Password, Contact Form Design

admin015 mins

In this post I am going to share combined pack of Cool 3D Animated Signin, Signup, Forget Password, Contact Form Design for you. It’ll give you the feel of Prismatic animation effect each time you click on any form to switch between. If you are planning to create a new web app this cool animated design for login and registration is for you.
Cool 3D Animated Signin, Signup, Forget Password, Contact Form Design

HTML

    ="nav">
  
  • ="showLogin()">Login
    • >
  
  • ="showSignup()">Sign up
    • >
  
  • ="showForgotPassword()">Forgot password
    • >
  
  • ="showSubscribe()">Subscribe
    • >
  
  • ="showContactUs()">Contact us
    • >

>

="wrapper">
  
="rec-prism">
    
="face face-top">
      
="content">
        
>Subscribe
>
        >Enter your email so we can send you the latest updates!>
        >
      
>
    
>
    >
    
="face face-back">
      
="content">
        
>Forgot your password?
>
        >Enter your email so we can send you a reset link for your password>
        >
      
>
    
>
    >
    
="face face-left">
      
="content">
        
>Contact us
>
        >
      
>
    
>
    
="face face-bottom">
      
="content">
        
="thank-you-msg">
          Thank you!
        
>
      
>
    
>
  
>

>
  • Login
  • Sign up
  • Forgot password
  • Subscribe
  • Contact us

Subscribe

Enter your email so we can send you the latest updates!

Forgot your password?

Enter your email so we can send you a reset link for your password

CSS

* {
  box-sizing: border-box;
}
 
body {
  font-family: Tahoma,Verdana,Segoe,sans-serif;
  font-size: 14px;
  background: #f6fffd;
  padding: 20px;
  text-align: center;
}
 
.wrapper {
  width: 250px;
  height: 350px;
  margin: 60px auto;
  perspective: 600px;
  text-align: left;
}
 
.rec-prism {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-100px);
  transition: transform 0.5s ease-in;
}
 
.face {
  position: absolute;
  width: 250px;
  height: 350px;
  padding: 20px;
  background: rgba(250, 250, 250, 0.96);
  border: 3px solid #07ad90;
  border-radius: 3px;
}
.face .content {
  color: #666;
}
.face .content h2 {
  font-size: 1.2em;
  color: #07ad90;
}
.face .content .field-wrapper {
  margin-top: 30px;
  position: relative;
}
.face .content .field-wrapper label {
  position: absolute;
  pointer-events: none;
  font-size: 0.85em;
  top: 40%;
  left: 0;
  transform: translateY(-50%);
  transition: all ease-in 0.25s;
  color: #999999;
}
.face .content .field-wrapper input[type="text"], .face .content .field-wrapper input[type="password"], .face .content .field-wrapper input[type="submit"], .face .content .field-wrapper textarea {
  -webkit-appearance: none;
  appearance: none;
}
.face .content .field-wrapper input[type="text"]:focus, .face .content .field-wrapper input[type="password"]:focus, .face .content .field-wrapper input[type="submit"]:focus, .face .content .field-wrapper textarea:focus {
  outline: none;
}
.face .content .field-wrapper input[type="text"], .face .content .field-wrapper input[type="password"], .face .content .field-wrapper textarea {
  width: 100%;
  border: none;
  background: transparent;
  line-height: 2em;
  border-bottom: 1px solid #07ad90;
  color: #666;
}
.face .content .field-wrapper input[type="text"]::-webkit-input-placeholder, .face .content .field-wrapper input[type="password"]::-webkit-input-placeholder, .face .content .field-wrapper textarea::-webkit-input-placeholder {
  opacity: 0;
}
.face .content .field-wrapper input[type="text"]::-moz-placeholder, .face .content .field-wrapper input[type="password"]::-moz-placeholder, .face .content .field-wrapper textarea::-moz-placeholder {
  opacity: 0;
}
.face .content .field-wrapper input[type="text"]:-ms-input-placeholder, .face .content .field-wrapper input[type="password"]:-ms-input-placeholder, .face .content .field-wrapper textarea:-ms-input-placeholder {
  opacity: 0;
}
.face .content .field-wrapper input[type="text"]:-moz-placeholder, .face .content .field-wrapper input[type="password"]:-moz-placeholder, .face .content .field-wrapper textarea:-moz-placeholder {
  opacity: 0;
}
.face .content .field-wrapper input[type="text"]:focus + label, .face .content .field-wrapper input[type="text"]:not(:placeholder-shown) + label, .face .content .field-wrapper input[type="password"]:focus + label, .face .content .field-wrapper input[type="password"]:not(:placeholder-shown) + label, .face .content .field-wrapper textarea:focus + label, .face .content .field-wrapper textarea:not(:placeholder-shown) + label {
  top: -35%;
  color: #42509e;
}
.face .content .field-wrapper input[type="submit"] {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  width: 100%;
  background: #07ad90;
  line-height: 2em;
  color: #fff;
  border: 1px solid #07ad90;
  border-radius: 3px;
  padding: 5px;
}
.face .content .field-wrapper input[type="submit"]:hover {
  opacity: 0.9;
}
.face .content .field-wrapper input[type="submit"]:active {
  transform: scale(0.96);
}
.face .content .field-wrapper textarea {
  resize: none;
  line-height: 1em;
}
.face .content .field-wrapper textarea:focus + label, .face .content .field-wrapper textarea:not(:placeholder-shown) + label {
  top: -25%;
}
.face .thank-you-msg {
  position: absolute;
  width: 200px;
  height: 130px;
  text-align: center;
  font-size: 2em;
  color: #07ad90;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
}
.face .thank-you-msg:after {
  position: absolute;
  content: '';
  width: 50px;
  height: 25px;
  border: 10px solid #07ad90;
  border-right: 0;
  border-top: 0;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(0deg) scale(0);
  transform: translate(-50%, -50%) rotate(0deg) scale(0);
  -webkit-animation: success ease-in 0.15s forwards;
  animation: success ease-in 0.15s forwards;
  animation-delay: 2.5s;
}
.face-front {
  transform: rotateY(0deg) translateZ(125px);
}
.face-top {
  height: 250px;
  transform: rotateX(90deg) translateZ(125px);
}
.face-back {
  transform: rotateY(180deg) translateZ(125px);
}
.face-right {
  transform: rotateY(90deg) translateZ(125px);
}
.face-left {
  transform: rotateY(-90deg) translateZ(125px);
}
.face-bottom {
  height: 250px;
  transform: rotateX(-90deg) translateZ(225px);
}
 
.nav {
  margin: 20px 0;
  padding: 0;
}
.nav li {
  display: inline-block;
  list-style-type: none;
  font-size: 1em;
  margin: 0 10px;
  color: #42509e;
  position: relative;
  cursor: pointer;
}
.nav li:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 20px;
  border-bottom: 1px solid #42509e;
  transition: all ease-in 0.25s;
}
.nav li:hover:after {
  width: 100%;
}
 
.psw, .signup, .singin {
  display: block;
  margin: 20px 0;
  font-size: 0.75em;
  text-align: center;
  color: #42509e;
  cursor: pointer;
}
 
small {
  font-size: 0.7em;
}
 
@-webkit-keyframes success {
  from {
    -webkit-transform: translate(-50%, -50%) rotate(0) scale(0);
  }
  to {
    -webkit-transform: translate(-50%, -50%) rotate(-45deg) scale(1);
  }
}

JS

let prism = document.querySelector(".rec-prism");
 
function showSignup(){
  prism.style.transform = "translateZ(-100px) rotateY( -90deg)";
}
function showLogin(){
  prism.style.transform = "translateZ(-100px)";
}
function showForgotPassword(){
  prism.style.transform = "translateZ(-100px) rotateY( -180deg)";
}
 
function showSubscribe(){
  prism.style.transform = "translateZ(-100px) rotateX( -90deg)";
}
 
function showContactUs(){
  prism.style.transform = "translateZ(-100px) rotateY( 90deg)";
}
 
function showThankYou(){
  prism.style.transform = "translateZ(-100px) rotateX( 90deg)";
}

See live demo and download source code.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

This awesome script developed by nourabusoud. Visit their official repository for more information and follow for future updates.

Leave a Reply

Your email address will not be published. Required fields are marked *

Related News

Top