<div class="fun-cube"><i class="fa fa-cube"></i></div>
<h1>Single input 3D form</h1>

<!-- heirarchy: #cuboid > form > div*4(cuboid faces) -->
<div id="cuboid">
		<!-- #1 hover button -->
			<p class="cuboid-text">Subscribe</p>
		<!-- #2 text input -->
			<!-- Label to trigger #submit -->
			<label for="submit" class="submit-icon">
				<i class="fa fa-chevron-right"></i>
			<input type="text" id="email" class="cuboid-text" placeholder="Your Email" autocomplete="off"/>
			<!-- hidden submit button -->
			<input type="submit" id="submit" />
		<!-- #3 loading message -->
			<p class="cuboid-text loader">Just a moment</p>
		<!-- #4 success message -->
			<!-- reset/retry button -->
			<span class="reset-icon"><i class="fa fa-refresh"></i></span>
			<p class="cuboid-text">Thankyou, we'll be in touch</p>
* {margin: 0; padding: 0;}
body {
	background: hsl(120, 40%, 60%);
	padding-top: 150px;
	font: normal 18px Sniglet; color: white; text-align: center;

/*general styles*/
h1 {font-weight: normal; font-size: 36px; margin-bottom: 75px;}
.fun-cube i {transform: scale(10); opacity: 0.1;}

#cuboid {
	width: 400px; margin: 0 auto;
	/*this also makes #cuboid a container for absolutely positioned descendants*/
	perspective: 1000px;
#cuboid form {
	/*counter translate*/
	transform: translateZ(-20px);
	/*propogate 3d space for children*/
	transform-style: preserve-3d;
	/*prevent height collapse as children are absolutely positioned*/
	height: 40px;
	/*for smooth animations*/
	transition: all 0.35s;

.cuboid-text {
	/*each face will be 40px high*/
	line-height: 40px; height: 40px;
	background: hsl(120, 40%, 20%);
.loader {
	background: hsl(120, 40%, 30%);
	animation: phase 1s infinite;
/*Lets create a pulsating animation for the loader face*/
@keyframes phase {
	50% {background: hsl(120, 70%, 30%);}
#email {
	background: white; outline: none; border: 0 none;
	font: inherit; text-align: left; color: hsl(120, 40%, 30%);
	display: block; width: 100%; padding: 0 10px;
	box-sizing: border-box;
#submit {display: none;}

.submit-icon, .reset-icon {
	position: absolute; top: 0; right: 0;
	color: rgba(0, 0, 0, 0.25);
	line-height: 40px; padding: 0 10px;
	/*smooth transitions when user activates input and types something*/
	transition: all 0.5s;
	/*to make the icons feel like buttons*/
	cursor: pointer;
/*.active = when the user is typing something*/
.submit-icon.active {color: hsl(120, 40%, 30%);}
.reset-icon {color: rgba(255, 255, 255, 0.25); font-size: 14px;}

#cuboid div {position: absolute; top: 0; left: 0; width: 100%;}
/*3D transforms. Each face will be rotated in multiples of -90deg and moved 20px(half of their 40px height) out*/
#cuboid div:nth-child(1) {transform: rotateX(0deg) translateZ(20px);}
#cuboid div:nth-child(2) {transform: rotateX(-90deg) translateZ(20px);}
#cuboid div:nth-child(3) {transform: rotateX(-180deg) translateZ(20px);}
#cuboid div:nth-child(4) {transform: rotateX(-270deg) translateZ(20px);}

/*the form will have 4 states/classes(default+3) for rotation*/
#cuboid form:hover, 
#cuboid form.ready {transform: translateZ(-20px) rotateX(90deg);}
#cuboid form.loading {transform: translateZ(-20px) rotateX(180deg);}
#cuboid form.complete {transform: translateZ(-20px) rotateX(270deg);}
//jQuery time

//add '.ready' to form when user focuses on it
	$("#cuboid form").addClass("ready");
//remove '.ready' when user blus away but only if there is no content
	if($(this).val() == "")
		$("#cuboid form").removeClass("ready");

//If the user is typing something make the arrow green/.active
	//this adds .active class only if the input has some text
	$(".submit-icon").toggleClass("active", $(this).val().length > 0);

//on form submit remove .ready and add .loading to the form
$("#cuboid form").submit(function(){
	//finish loading in 3s
	setTimeout(complete, 3000);
	//prevent default form submisson
	return false;
function complete()
	$("#cuboid form").removeClass("loading").addClass("complete");
//reset/refresh functionality
	$("#cuboid form").removeClass("complete");
Run Pen

External CSS

  1. https://fonts.googleapis.com/css?family=Sniglet
  2. //maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js