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.

Update: You can find another awesome looking login form over at Epic Bootstrap.

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.

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.

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.