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

Forgot? Forgot?
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


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