Formulario de inicio de sesión similar a Apple con transformaciones CSS 3D

Oye, ¿sabías que puedes voltear elementos en el espacio 3D con CSS3? Probablemente debería hacerlo, ya que esto ha sido posible durante casi dos años. Primero solo en los navegadores Webkit:Safari y Chrome, pero ahora también en Firefox. Esto significa que más de la mitad del mundo (que no usa un navegador IE) puede ver animaciones y efectos avanzados basados ​​en CSS.

En este tutorial, veremos cómo podemos usar estas transformaciones para crear un interesante efecto de volteo en un formulario inspirado en Apple.

Actualizar: Puede encontrar otro formulario de inicio de sesión de aspecto impresionante en Epic Bootstrap.

La idea

Tendremos dos formularios:inicio de sesión y recuperación de contraseña, con solo uno visible a la vez. Al hacer clic en un enlace (las cintas en el ejemplo), se activará una rotación CSS3 en el eje Y, que revelará la otra forma con un efecto de volteo.

Usaremos jQuery para escuchar los clics en los enlaces y agregar o eliminar un nombre de clase en el elemento contenedor de los formularios. Con CSS aplicaremos el rotateY transformación (una rotación horizontal) a ambas formas, pero con un 180 grados diferencia dependiendo de esta clase. Esto hará que las formas aparezcan en lados opuestos de una plataforma imaginaria. Para animar la transición, usaremos la propiedad de transición CSS.

El marcado

Necesitamos dos formularios:iniciar sesión y recuperar . Cada formulario tendrá un botón de envío y entradas de texto/contraseña:

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>

Tenga en cuenta los ID de los elementos en el formulario. Los usaremos ampliamente en la parte de CSS. Solo uno de estos formularios será visible a la vez. El otro se revelará durante la animación de volteo. Cada formulario tiene un flipLink ancla. Al hacer clic aquí, se alternará (agregará o eliminará) el invertido nombre de la clase en el #formContainer div, que a su vez activará la animación CSS3.

El código jQuery

El primer paso importante es determinar si el navegador actual es compatible con las transformaciones 3D de CSS3. Si no es así, proporcionaremos una alternativa (los formularios se cambiarán directamente). También usaremos jQuery para escuchar los clics en el flipLink anclas Como no construiremos un backend real para estos formularios, también tendremos que evitar que se envíen.

Aquí está el código que hace todo lo anterior:

activos/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;
    }
});

Para mayor comodidad, la funcionalidad que comprueba la compatibilidad con 3D CSS3 se extrae en una función auxiliar independiente. Comprueba la compatibilidad con la propiedad de perspectiva, que es lo que le da profundidad a nuestra demostración.

Ahora podemos pasar a la parte CSS.

El CSS

CSS se encargará de todo, desde la presentación de los formularios y los elementos del formulario, hasta los efectos animados y las transiciones. Comenzaremos con los estilos de contenedor de formulario.

activos/css/estilos.css

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

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

Así como un ancho , altura , margen y posicionamiento , también establecemos la perspectiva del elemento Esta propiedad le da profundidad al escenario. Sin él, las animaciones aparecerían planas (intente deshabilitarlo para ver a qué me refiero). Cuanto mayor sea el valor, más lejos estará el punto de fuga.

A continuación, diseñaremos los formularios mismos.

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

Primero describimos los estilos comunes que se comparten entre ambas formas. Después de esto añadimos los estilos únicos que los diferencian.

La visibilidad de la cara posterior La propiedad es importante, ya que le indica al navegador que oculte la parte posterior de los formularios. De lo contrario, terminaríamos con una versión duplicada del formulario de recuperación en lugar de mostrar el de inicio de sesión. El efecto flip se logra usando el rotateY(180deg) transformación. Gira el elemento de derecha a izquierda. Y como hemos declarado una transición propiedad, cada rotación se animará sin problemas.

Observe el fotograma clave declaración en la parte inferior de la sección del formulario. Esto define una repetición (declarada por el infinito palabra clave) animación de fotogramas clave, que no depende de la interacción del usuario. La descripción CSS de la animación se proporciona a continuación:

/* 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;}
}

Cada uno de los grupos de porcentajes corresponde a un punto de tiempo en la animación. A medida que se repite, la sombra del cuadro aparecerá como una luz pulsante suave.

Ahora veamos qué sucede una vez que hemos hecho clic en el enlace y el volteado la clase se agrega a #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);
}

La clase invertida provoca el #login y #recover div para girar 180 grados. Esto hace que el formulario #login desaparezca. Pero como el #recover uno ya estaba frente a nosotros con su parte posterior, se muestra en lugar de ocultarse.

Las declaraciones de opacidad aquí son solo una solución para un error en el navegador de Android, que ignora la propiedad de visibilidad de la cara posterior y muestra una versión invertida de los formularios en lugar de ocultarlos. Con esta solución, la animación funciona incluso en Android e iOS, además de en los navegadores de escritorio.

¡Listo!

Las transformaciones 3D de CSS abren las puertas a todo tipo de efectos interesantes, antes reservados solo para páginas web pesadas en flash. Ahora podemos tener sitios ligeros, rastreables y semánticos que se vean bien y brinden respaldos adecuados para navegadores inferiores.