Single input 3D form

Single input 3D form | Input en 3D con CSS HTML y JS

Single input 3D form only with CSS HTML & JS | Input en 3D con CSS, HTML y JAVASCRIPT.

By Son Tran-Nguyen

Subscribe for more Code

Recibe las Actualizaciones de HTML y CSS

Vídeo del Post/DEMO

<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">Thank you, for subscribe :D</p>


body{background:#70c170;padding-top:150px;font:400 18px Sniglet;color:#fff;text-align:center}
.fun-cube i{transform:scale(10);opacity:.1}
#cuboid{width:400px;margin:0 auto;perspective:1000px}
#cuboid form{transform:translateZ(-20px);transform-style:preserve-3d;height:40px;transition:all .35s}
.loader{background:#2d6b2d;animation:phase 1s infinite}
@keyframes phase{50%{background:#168216}}
#email{background:#fff;outline:0;border:0;font:inherit;text-align:left;color:#2d6b2d;display:block;width:100%;padding:0 10px;box-sizing:border-box}
.reset-icon,.submit-icon{position:absolute;top:0;right:0;color:rgba(0,0,0,.25);line-height:40px;padding:0 10px;transition:all .5s;cursor:pointer}{color:#2d6b2d}
#cuboid div{position:absolute;top:0;left:0;width:100%}
#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)}
#cuboid form.ready,#cuboid form:hover{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");
¿Te gusto el post?

Gabriela Laya

Me gusta mucho el Diseño Web, Crear plantillas para Wordpress y Blogger y todo lo relacionado a estas 2 plataformas de Blogs. En mi tiempo libre me encanta Leer, aprender a usar nuevos programas, escuchar música y más :D

Recibe las últimas actualizaciones