Apple-like Login Form with CSS 3D Transforms

Apple-like Login Form with CSS 3D Transforms

Hey did you know that you can flip elements in 3D space with CSS3? You probably should as this has been possible for nearly two years. First only in Webkit browsers – Safari and Chrome, but now in Firefox as well. This means that more than half of the world (that use a non IE browser) can see advanced, CSS driven animations and effects.

In this tutorial we will see how we can use these transforms to create an interesting flipping effect on an Apple-inspired form.

The Idea

We will have two forms – login and password recovery, with only one visible at a time. Clicking a link (the ribbons in the example), will trigger a CSS3 rotation on the Y axis, which will reveal the other form with a flipping effect.

We will use jQuery to listen for clicks on the links, and add or remove a class name on the forms’ container element. With CSS we will apply the rotateY transformation (a horizontal rotation) to both forms, but with a 180deg difference depending on this class. This will make the forms appear on opposite sides of an imaginary platform. To animate the transition, we will use the CSS transition property.

Learn more about CSS3 3D transforms, read an intro or see some demos.

The markup

We need two forms – login and recover. Each form will have a submit button, and text/password inputs:

index.html

		<div id="formContainer">
			<form id="login" method="post" action="./">
				<a href="#" id="flipToRecover" class="flipLink">Forgot?</a>
				<input type="text" name="loginEmail" id="loginEmail" placeholder="Email" />
				<input type="password" name="loginPass" id="loginPass" placeholder="Password" />
				<input type="submit" name="submit" value="Login" />
			</form>
			<form id="recover" method="post" action="./">
				<a href="#" id="flipToLogin" class="flipLink">Forgot?</a>
				<input type="text" name="recoverEmail" id="recoverEmail" placeholder="Your Email" />
				<input type="submit" name="submit" value="Recover" />
			</form>
		</div>

Note the IDs of the elements in the form. We will be using them extensively in the CSS part. Only one of these forms will be visible at a time. The other will be revealed during the flip animation. Each form has a flipLink anchor. Clicking this will toggle (add or remove) the flipped class name on the #formContainer div, which will in turn trigger the CSS3 animation.

Apple-like Form with CSS 3D Transforms

Apple-like Form with CSS 3D Transforms

The jQuery Code

The first important step is to determine whether the current browser supports CSS3 3D transforms at all. If it doesn’t, we will provide a fallback (the forms will be switched directly). We will also use jQuery to listen for clicks on the flipLink anchors. As we will not be building an actual backend to these forms we will also need to prevent them from being submitted.

Here is the code that does all of the above:

assets/js/script.js

$(function(){

	// Checking for CSS 3D transformation support
	$.support.css3d = supportsCSS3D();

	var formContainer = $('#formContainer');

	// Listening for clicks on the ribbon links
	$('.flipLink').click(function(e){

		// Flipping the forms
		formContainer.toggleClass('flipped');

		// If there is no CSS3 3D support, simply
		// hide the login form (exposing the recover one)
		if(!$.support.css3d){
			$('#login').toggle();
		}
		e.preventDefault();
	});

	formContainer.find('form').submit(function(e){
		// Preventing form submissions. If you implement
		// a backend, you will want to remove this code
		e.preventDefault();
	});

	// A helper function that checks for the
	// support of the 3D CSS3 transformations.
	function supportsCSS3D() {
		var props = [
			'perspectiveProperty', 'WebkitPerspective', 'MozPerspective'
		], testDom = document.createElement('a');

		for(var i=0; i<props.length; i++){
			if(props[i] in testDom.style){
				return true;
			}
		}

		return false;
	}
});

For convenience, the functionality that checks for 3D CSS3 support is extracted into a separate helper function. It checks for support of the perspective property, which is what gives our demo a depth.

We can now move on to the CSS part.

Password Recovery

Password Recovery

The CSS

CSS will handle everything from the presentation of the forms and form elements, to the animated effects and transitions. We’ll start with the form container styles.

assets/css/styles.css

#formContainer{
	width:288px;
	height:321px;
	margin:0 auto;
	position:relative;

	-moz-perspective: 800px;
	-webkit-perspective: 800px;
	perspective: 800px;
}

As well as a width, height, margin and positioning, we also set the perspective of the element. This property gives depth to the stage. Without it the animations would appear flat (try disabling it to see what I mean). The greater the value, the farther away the vanishing point.

Next we’ll style the forms themselves.

#formContainer form{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;

	/* Enabling 3d space for the transforms */
	-moz-transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;

	/* When the forms are flipped, they will be hidden */
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;

	/* Enabling a smooth animated transition */
	-moz-transition:0.8s;
	-webkit-transition:0.8s;
	transition:0.8s;

	/* Configure a keyframe animation for Firefox */
	-moz-animation: pulse 2s infinite;

	/* Configure it for Chrome and Safari */
	-webkit-animation: pulse 2s infinite;
}

#login{
	background:url('../img/login_form_bg.jpg') no-repeat;
	z-index:100;
}

#recover{
	background:url('../img/recover_form_bg.jpg') no-repeat;
	z-index:1;
	opacity:0;

	/* Rotating the recover password form by default */
	-moz-transform:rotateY(180deg);
	-webkit-transform:rotateY(180deg);
	transform:rotateY(180deg);
}

We first describe the common styles that are shared between both forms. After this we add the unique styles that differentiate them.

The backface visibility property is important, as it instructs the browser to hide the backside of the forms. Otherwise we would end up with a mirrored version of the recover form instead of showing the login one. The flip effect is achieved using the rotateY(180deg) transformation. It rotates the element right to left. And as we’ve declared a transition property, every rotation will be smoothly animated.

Notice the keyframe declaration at the bottom of the form section. This defines a repeating (declared by the infinite keyword) keyframe animation, which does not depend on user interaction. The CSS description of the animation is given below:

/* Firefox Keyframe Animation */
@-moz-keyframes pulse{
	0%{		box-shadow:0 0 1px #008aff;}
	50%{	box-shadow:0 0 8px #008aff;}
	100%{	box-shadow:0 0 1px #008aff;}
}

/* Webkit keyframe animation */
@-webkit-keyframes pulse{
	0%{		box-shadow:0 0 1px #008aff;}
	50%{	box-shadow:0 0 10px #008aff;}
	100%{	box-shadow:0 0 1px #008aff;}
}

Each of the percentage groups corresponds to a time point in the animation. As it is repeating the box shadow will appear as a soft pulsating light.

Now let us see what happens once we’ve clicked the link, and the flipped class is added to #formContainer:

#formContainer.flipped #login{

	opacity:0;

	/**
	 * Rotating the login form when the
	 * flipped class is added to the container
	 */

	-moz-transform:rotateY(-180deg);
	-webkit-transform:rotateY(-180deg);
	transform:rotateY(-180deg);
}

#formContainer.flipped #recover{

	opacity:1;

	/* Rotating the recover div into view */
	-moz-transform:rotateY(0deg);
	-webkit-transform:rotateY(0deg);
	transform:rotateY(0deg);
}

The flipped class causes the #login and #recover div to get rotated by 180 degrees. This makes the #login form disappear. But as the #recover one was already facing us with its back side, it gets shown instead of hidden.

The opacity declarations here are only a fix for a bug in the Android browser, which ignores the backface-visibility property and shows a flipped version of the forms instead of hiding them. With this fix, the animation works even on Android and iOS in addition to desktop browsers.

Done!

CSS 3D transforms open the doors to all kinds of interesting effects, once reserved only for heavy flash web pages. Now we can have lightweight, crawlable and semantic sites that both look good and provide proper fallbacks for subpar browsers.

Join our newsletter and get our PSDs!19,640 people learn about HTML5, JS and more. Join them!

by Martin Angelov

Martin is a web developer with an eye for design from Bulgaria. He founded Tutorialzine in 2009 and it still is his favorite side project.

28 Comments

  1. Rom says:

    Cool..ill try to use it soon..thanks!

  2. Cassy says:

    It doesn't work in IE8. IE8 doesn't have a nice rotate transition.

    1. Martin Angelov says:

      No IE version currently support 3D transforms. IE10 is said to have support, but I haven't been able to test it, so I didn't include the functionality.

    2. Andrea says:

      How can you ask such a question: CSS3 in IE8? or 9? Are you mad? How can you even hope for it! I am ironic of course ;)

      1. Sock says:

        they can use modernizr and polyfills for use this in ie

  3. Martin,
    Thanks once again for your tutorials. This stuff is great.
    I was looking for a flip effect. What I need is a menu that has a sub menu on the back.
    I will try to make it using your tutorial.
    Thanks a lot!
    Marcelo.

  4. Reuben says:

    Hi Guys, the form does not submit wWhen you click the button. it just does nothing!

    1. Martin Angelov says:

      It was mentioned in the article that we will only be concentrating on the presentation of the form. If you wish to build an actual backend (a simple PHP script that handles the submissions would do a fine job), you will have to remove line 25 of assets/js/script.js.

  5. Bharat says:

    This is a high quality tutorial, must bookmark it :)

  6. Damian says:

    I agree, it's amazing. Congrats.

  7. librajt says:

    Hey, great work !
    But have you ever noticed that the scroll bar on the demo page appears to be blank ? I'm wondering which css rule couses this....

  8. Radu says:

    This is interesting.
    Five gallons of code that works only on 3 out of 5 browsers.
    Who calls this 3D? Is this the future of web?
    I'll stick to my Stage3D that I'm glad it's not working on your tablets.

  9. Edward says:

    This is really cool, but the non support os ie(i know i know it sucks blah blah blah) makes it a non starter. I was totally going to use this for a log in page for a public site.
    What really sucks for this tut is that the real icloud page does work in ie, and it has that metal shine thing that ths tut is missing.
    Otherwise, this is fantastic, thank you!

  10. Nice one Martin, just hoping that the fallback for IE could have been handled more gracefully..!!

  11. Nimsrules says:

    Super high quality tutorial. With some modifications you can prepare this form for IE fallback too. Keep up the good work Martin.

  12. Gabo86 says:

    Who use IE by the way? Excelent tutorial! Nice!

  13. Adrian says:

    In opera si not working dude :(

    1. Andoru says:

      Yeah.. me too.. :(

  14. Niall says:

    Works in Google Chrome. Animation is really awesome.

  15. Devanche says:

    I was just wondering, would there by any chance at all if you could please maybe show how to implement this for wordpress as well? This tutorial looks kick ass, but alas CMS platforms are my life that I build off of, please make a tutorial on how to implement this for that.

    Thanks =D

  16. TheDude says:

    Wow Martin, I just checked out all of your tutorials that you have posted and you freakin rock Man! Great job! Clean Code and instructions- huge help! Thank YOU!!!!!

  17. jettaz says:

    how can i add one flip more ?

  18. Neel says:

    Hi ,

    Very nice animation . i am also website developer

  19. Dave says:

    Password Recovery Form fails if you click back and forth 3 times in FF Aurora.
    And the devil appeared !!

  20. ziad says:

    is there a possibility that two flips can be added in one page... only one seem to work if two flips are added... nice tut

  21. Chris says:

    This is incredible, many thanks! Just one thing though - the login submit button appears all white in IE9. Do you know an easy way to fix this? Thank you so much again for this.

Add Comment

Add a Reply

HTML is escaped automatically. Surround code blocks with <pre></pre> for readability.
Perks:   **bold**   __italics__   [some text](http://example.com) for links