Tutorial Apple-like Login Form with CSS 3D Transforms

Demo              -              Download Here                -               Source

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.

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.