<ul class="nav">
  <li onclick="showLogin()">Login</li>
  <li onclick="showSignup()">Sign up</li>
  <li onclick="showForgotPassword()">Forgot password</li>
  <li onclick="showSubscribe()">Subscribe</li>
  <li onclick="showContactUs()">Contact us</li>
</ul>
<div class="wrapper">
  <div class="rec-prism">
    <div class="face face-top">
      <div class="content">
        <h2>Subscribe</h2>
        <small>Enter your email so we can send you the latest updates!</small>
        <form onsubmit="event.preventDefault()">
          <div class="field-wrapper">
            <input type="text" name="email" placeholder="email">
            <label>e-mail</label>
          </div>
          <div class="field-wrapper">
            <input type="submit" onclick="showThankYou()">
          </div>
        </form>
      </div>
    </div>
    <div class="face face-front">
      <div class="content">
        <h2>Sign in</h2>
        <form onsubmit="event.preventDefault()">
          <div class="field-wrapper">
            <input type="text" name="username" placeholder="username">
            <label>username</label>
          </div>
          <div class="field-wrapper">
            <input type="password" name="password" placeholder="password" autocomplete="new-password">
            <label>password</label>
          </div>
          <div class="field-wrapper">
            <input type="submit" onclick="showThankYou()">
          </div>
          <span class="psw" onclick="showForgotPassword()">Forgot Password?   </span>
          <span class="signup" onclick="showSignup()">Not a user?  Sign up</span>
        </form>
      </div>
    </div>
    <div class="face face-back">
      <div class="content">
        <h2>Forgot your password?</h2>
        <small>Enter your email so we can send you a reset link for your password</small>
        <form onsubmit="event.preventDefault()">
          <div class="field-wrapper">
            <input type="text" name="email" placeholder="email">
            <label>e-mail</label>
          </div>
          <div class="field-wrapper">
            <input type="submit" onclick="showThankYou()">
          </div>
        </form>
      </div>
    </div>
    <div class="face face-right">
      <div class="content">
        <h2>Sign up</h2>
        <form onsubmit="event.preventDefault()">
          <div class="field-wrapper">
            <input type="text" name="email" placeholder="email">
            <label>e-mail</label>
          </div>
          <div class="field-wrapper">
            <input type="password" name="password" placeholder="password" autocomplete="new-password">
            <label>password</label>
          </div>
          <div class="field-wrapper">
            <input type="password" name="password2" placeholder="password" autocomplete="new-password">
            <label>re-enter password</label>
          </div>
          <div class="field-wrapper">
            <input type="submit" onclick="showThankYou()">
          </div>
          <span class="singin" onclick="showLogin()">Already a user?  Sign in</span>
        </form>
      </div>
    </div>
    <div class="face face-left">
      <div class="content">
        <h2>Contact us</h2>
        <form onsubmit="event.preventDefault()">
          <div class="field-wrapper">
            <input type="text" name="name" placeholder="name">
            <label>Name</label>
          </div>
          <div class="field-wrapper">
            <input type="text" name="email" placeholder="email">
            <label>e-mail</label>
          </div>
          <div class="field-wrapper">
            <textarea placeholder="your message"></textarea>
            <label>your message</label>
          </div>
          <div class="field-wrapper">
            <input type="submit" onclick="showThankYou()">
          </div>
        </form>
      </div>
    </div>
    <div class="face face-bottom">
      <div class="content">
        <div class="thank-you-msg">
          Thank you!
        </div>
      </div>
    </div>
  </div>
</div>
// Dimensions
$prism-height: 350px;
$prism-length: 250px;
$prism-depth: $prism-length;
$spacing: 20px;
$br: 3px;

// Colors
$text-light: #fff;
$text-dark: #666;
$blue: #03a9f4;
$smoke: #f9f9fa;
$coral: #ff5751;
$navy-blue: #42509e;
$green: #07ad90;

*{
  box-sizing: border-box;
}

body{
  font-family: Tahoma,Verdana,Segoe,sans-serif; 
  font-size: 14px;
  background: #f6fffd;
  padding: $spacing;
  text-align: center;
}
.wrapper{
  width: $prism-length;
  height: $prism-height;
  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: $prism-length;
  height: $prism-height;
  padding: $spacing;
  background: rgba(250,250,250,0.96);
  border: 3px solid $green;
  border-radius: 3px;
  
  .content{
    color: $text-dark;
    h2{
      font-size: 1.2em;
      color: $green;
    }
    .field-wrapper{
      margin-top: $spacing*1.5;
      position: relative;

      label{
        position: absolute;
        pointer-events: none;
        font-size: 0.85em;
        top: 40%;
        left: 0;
        transform: translateY(-50%);
        transition: all ease-in 0.25s;
        color: lighten($text-dark, 20%);
      }
      input[type="text"], input[type="password"], input[type="submit"], textarea{
        -webkit-appearance: none;
        appearance: none;
        &:focus{
          outline: none;
        }
      }
      input[type="text"], input[type="password"], textarea{
        width: 100%;
        border: none;
        background: transparent;
        line-height: 2em;
        border-bottom: 1px solid $green;
        color: $text-dark;

        &::-webkit-input-placeholder{
          opacity: 0;
        }
        &::-moz-placeholder{
          opacity: 0;
        }
        &:-ms-input-placeholder{
          opacity: 0;
        }
        &:-moz-placeholder { 
          opacity: 0;
        }
        &:focus, &:not(:placeholder-shown){
          + label{
            top: -35%;
            color: $navy-blue;
          }
        }
      }
      input[type="submit"]{
        -webkit-appearance: none;
        appearance: none;
        cursor: pointer;
        width: 100%;
        background: $green;
        line-height: 2em;
        color: $text-light;
        border: 1px solid $green;
        border-radius: $br;
        padding: $spacing/4;
        
        &:hover{
          opacity: 0.9;
        }
        &:active{
          transform: scale(0.96);
        }
      }
      textarea{
        resize: none;
        line-height: 1em;
        &:focus, &:not(:placeholder-shown){
          + label{
            top: -25%;
          }
        }
      }
    }
  }
  
  .thank-you-msg{
    position: absolute;
    width: 200px;
    height: 130px;
    text-align: center;
    font-size: 2em;
    color: $green;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    
    &:after{
      position: absolute;
      content: '';
      width: 50px;
      height: 25px;
      border: 10px solid $green;
      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;
    }
  }
  &-front{ 
    transform: rotateY(0deg) translateZ($prism-length/2);  
  }
  &-top{ 
    height: $prism-depth;
    transform: rotateX(90deg) translateZ($prism-depth/2); 
  }
  &-back{ 
    transform: rotateY(180deg) translateZ($prism-length/2); 
  }
  &-right{ 
    transform: rotateY(90deg) translateZ($prism-length/2); 
  }
  &-left{ 
    transform: rotateY(-90deg) translateZ($prism-length/2); 
  }
  &-bottom{ 
    height: $prism-depth;
    transform: rotateX(-90deg) translateZ($prism-height - ($prism-depth/2));
  }
}

.nav{
  margin: $spacing 0;
  padding: 0;
  
  li{
    display: inline-block;
    list-style-type: none;
    font-size: 1em;
    margin: 0 $spacing/2;
    color: $navy-blue;
    position: relative;
    cursor: pointer;
    &:after{
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 20px;
      border-bottom: 1px solid $navy-blue;
      transition: all ease-in 0.25s;
    }
    &:hover:after{
      width: 100%;
    }
  }
}

.psw, .signup, .singin{
  display: block;
  margin: $spacing 0;
  font-size: 0.75em;
  text-align: center;
  color: $navy-blue;
  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);
    }
}
View Compiled
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)";
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.