3D Rollover Sign-Up Form

Developer
Eric Tompkins
Size
3,727 Kb
Views
16,192
  1. 3D Rollover Sign-Up Form Previews
  2. 3D Rollover Sign-Up Form HTML Codes
  3. 3D Rollover Sign-Up Form CSS Codes
  4. 3D Rollover Sign-Up Form JS Codes

How do I make an 3d rollover sign-up form?

Interactive rollover effect on signup form.. What is a 3d rollover sign-up form? How do you make a 3d rollover sign-up form? This script and codes were developed by Eric Tompkins on 27 August 2022, Saturday.

3D Rollover Sign-Up Form Previews
IQ Test

3D Rollover Sign-Up Form - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3D Rollover Sign-Up Form</title> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>
<body>
<div class="envelope"><i class="fa fa-paper-plane"></i></div>
<h1>Have you signed up?</h1>
<!-- heirarchy: #cuboid > form > div*4(cuboid faces) -->
<div id="cuboid">	<form>	<!-- #1 hover button -->	<div> <p class="cuboid-text">Subscribe</p>	</div>	<!-- #2 text input -->	<div>	<!-- Label to trigger #submit -->	<label for="submit" class="submit-icon">	<i class="fa fa-envelope"></i>	</label>	<input type="text" id="email" class="cuboid-text" placeholder="Enter Email" autocomplete="off"/>	<!-- hidden submit button -->	<input type="submit" id="submit" />	</div>	<!-- #3 loading message -->	<div>	<p class="cuboid-text loader">Sending Your Request</p>	</div>	<!-- #4 success message -->	<div>	<!-- reset/retry button -->	<span class="reset-icon"><i class="fa fa-refresh"></i></span>	<p class="cuboid-text">Thank You. You're all signed up!</p>	</div>	</form>
</div>
</body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

3D Rollover Sign-Up Form - Script Codes CSS Codes

/*Custom fonts - Mako and FontAwesome*/
@import url(http://fonts.googleapis.com/css?family=Mako);
@import url('font-awesome.min.css');
* {margin: 0; padding: 0;}
body { background: url(http://lorempixel.com/output/food-q-c-640-480-2.jpg) no-repeat center center fixed;	-webkit-background-size: cover;	-moz-background-size: cover;	-o-background-size: cover;	background-size: cover;	padding-top: 150px;	font: normal 18px Mako; color: white; text-align: center;
}
/*general styles*/
h1 {font-weight: normal; font-size: 36px; margin-bottom: 75px;}
.envelope i {-webkit-transform: scale(10);-ms-transform: scale(10);transform: scale(15); opacity: 0.3;}
#cuboid {	width: 600px; margin: 0 auto;	/*this also makes #cuboid a container for absolutely positioned descendants*/	-webkit-perspective: 1000px;	perspective: 1000px;
}
#cuboid form {	/*counter translate*/	-webkit-transform: translateZ(-20px);	-ms-transform: translateZ(-20px);	transform: translateZ(-20px);	/*propogate 3d space for children*/	-webkit-transform-style: preserve-3d;	transform-style: preserve-3d;	/*prevent height collapse as children are absolutely positioned*/	height: 40px;	/*for smooth animations*/	-webkit-transition: all 0.35s;	transition: all 0.35s;
}
/*faces*/
.cuboid-text {	/*each face will be 40px high*/	line-height: 40px; height: 40px;	background: #c00; border-radius: 15px;
}
.loader {	background: #c00;	-webkit-animation: phase 1s infinite;	animation: phase 1s infinite;
}
/*Lets create a pulsating animation for the loader face*/
@-webkit-keyframes phase {	50% {background: hsl(200, 90%, 30%);}
}
@keyframes phase {	50% {background: hsl(200, 90%, 30%);}
}
#email {	background: white; outline: none; border: 0 none;	font: inherit; text-align: left; color: hsl(200, 40%, 30%);	display: block; width: 100%; padding: 0 10px;	-webkit-box-sizing: border-box;	-moz-box-sizing: border-box;	box-sizing: border-box;
}
#submit {display: none;}
.submit-icon, .reset-icon {	position: absolute; top: 0; right: 0;	color: hsla(30, 50%, 30%, 0.40);	line-height: 40px; padding: 0 10px;	/*smooth transitions when user activates input and types something*/	-webkit-transition: all 0.5s;	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(30, 70%, 70%);}
.reset-icon {color: hsla(0, 100%, 100%, 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) {-webkit-transform: rotateX(0deg) translateZ(20px);-ms-transform: rotateX(0deg) translateZ(20px);transform: rotateX(0deg) translateZ(20px);}
#cuboid div:nth-child(2) {-webkit-transform: rotateX(-90deg) translateZ(20px);-ms-transform: rotateX(-90deg) translateZ(20px);transform: rotateX(-90deg) translateZ(20px);}
#cuboid div:nth-child(3) {-webkit-transform: rotateX(-180deg) translateZ(20px);-ms-transform: rotateX(-180deg) translateZ(20px);transform: rotateX(-180deg) translateZ(20px);}
#cuboid div:nth-child(4) {-webkit-transform: rotateX(-270deg) translateZ(20px);-ms-transform: rotateX(-270deg) translateZ(20px);transform: rotateX(-270deg) translateZ(20px);}
/*the form will have 4 states/classes(default+3) for rotation*/
#cuboid form:hover,
#cuboid form.ready {-webkit-transform: translateZ(-20px) rotateX(90deg);-ms-transform: translateZ(-20px) rotateX(90deg);transform: translateZ(-20px) rotateX(90deg);}
#cuboid form.loading {-webkit-transform: translateZ(-20px) rotateX(180deg);-ms-transform: translateZ(-20px) rotateX(180deg);transform: translateZ(-20px) rotateX(180deg);}
#cuboid form.complete {-webkit-transform: translateZ(-20px) rotateX(270deg);-ms-transform: translateZ(-20px) rotateX(270deg);transform: translateZ(-20px) rotateX(270deg);}

3D Rollover Sign-Up Form - Script Codes JS Codes

//add '.ready' to form when user focuses on it
$("#email").focus(function(){	$("#cuboid form").addClass("ready");
})
//remove '.ready' when user blurs away but only if there is no content
$("#email").blur(function(){	if($(this).val() == "")	$("#cuboid form").removeClass("ready");
})
//If the user is typing something change the arrow colour/.active
$("#email").keyup(function(){	//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(){	$(this).removeClass("ready").addClass("loading");	//finish loading in 3s	setTimeout(complete, 3000);	//prevent default form submission	return false;
})
function complete()
{	$("#cuboid form").removeClass("loading").addClass("complete");
}
//reset/refresh functionality
$(".reset-icon").click(function(){	$("#cuboid form").removeClass("complete");
})
3D Rollover Sign-Up Form - Script Codes
3D Rollover Sign-Up Form - Script Codes
Home Page Home
Developer Eric Tompkins
Username _codemics
Uploaded August 27, 2022
Rating 3
Size 3,727 Kb
Views 16,192
Do you need developer help for 3D Rollover Sign-Up Form?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Eric Tompkins (_codemics) Script Codes
Name
JQuery FullScreen Overlay
A Pen by Eric Tompkins
Responsive Email Template
Menu Background Image Rollover
JQuery - Easy Sticky Nav Bar
Using Meny.js - Create 3D Nav Effect
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!