Apple-like Login Form with CSS 3D Transforms

Demo Download

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.

apple-like-form-css-3d.jpg

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.jpg

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.

Bootstrap Studio

The revolutionary web design tool for creating responsive websites and apps.

Learn more

Related Articles

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

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

Martin Angelov

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.

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 ;)

they can use modernizr and polyfills for use this in ie

Marcelo from Jogos da Barbie Moda e Magia

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.

it's amazing

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

Martin Angelov

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.

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

I agree, it's amazing. Congrats.

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....

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.

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!

Pankaj Parashar

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

Nimsrules

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

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

In opera si not working dude :(

Yeah.. me too.. :(

Works in Google Chrome. Animation is really awesome.

Devanche

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

Frisør Frederiksberg

damn, this is amazing!

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!!!!!

how can i add one flip more ?

Hi ,

Very nice animation . i am also website developer

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

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

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.