Tengo un formulario de inicio de sesión en un sitio que estoy construyendo actualmente, y también tengo un formulario de registro. Me gustaría añadir algo de animación por la rotación de la div para el otro lado cuando el «Sign up» se hace clic en enlace. Quiero que el formulario de inicio de sesión para estar en la parte delantera, y el formulario de inscripción en la parte posterior. Prefiero no usar javascript, pero si es necesario, lo haré.

Gracias por las posibles respuestas!

InformationsquelleAutor Ryan Smith | 2012-01-30

5 Comentarios

  1. 17

    Usted puede hacer la animación con CSS transition y transform: rotateY() sin Javascript, otros que la activación de la animación mediante la adición de una clase.

    Demo: http://jsfiddle.net/ThinkingStiff/9UMFg/

    CSS:

    .flip {
        backface-visibility: hidden;
        border: 1px solid black;
        height: 150px;
        position: absolute;
        transform-origin: 50% 50% 0px;
        transition: all 3s;
        width: 300px;    
    }
    
    #side-1 {
        transform: rotateY( 0deg );
    }
    
    #side-2 {
        transform: rotateY( 180deg );   
    }
    
    .flip-side-1 {    
        transform: rotateY( 0deg ) !important;
    }
    
    .flip-side-2 {
        transform: rotateY( 180deg ) !important;
    }

    HTML:

    <form id="side-1" class="flip">
        <div>login</div>
        <input id="username" placeholder="enter username" />
        <input id="password" placeholder="enter password" />
        <a id="login" href="#">login</a>
        <a id="signup" href="#">sign up</a>
    </form>
    <form id="side-2" class="flip">
        <div>signup</div>
        <input id="new-username" placeholder="enter username" />
        <input id="new-password" placeholder="enter password" />
        <input id="new-re-password" placeholder="re-enter password" />
        <a id="create" href="#">create</a>
    </form>

    Guión:

    document.getElementById( 'signup' ).addEventListener( 'click', function( event ) {
    
        event.preventDefault();
        document.getElementById( 'side-2' ).className = 'flip flip-side-1';
        document.getElementById( 'side-1' ).className = 'flip flip-side-2';
    
    }, false );
    • gracias mucho! útil de la paz de código!
  2. 2

    No tengo tiempo para escribir cualquier código de derecho ahora, pero algunos consejos que podrían ayudar;

    1) es necesario el uso de JavaScript, en conjunto con CSS, y, probablemente, un framework como jQuery, no hay punto de re-inventar la rueda, jQuery ya tiene una excelente animación cosas integrado.

    2) Romper la animación en las etapas de lo que realmente está pasando. Así a grandes rasgos, la sombra aparece, dando la impresión de que el formulario se levantó de la página, el contenido se desvanece, el formulario de ancho anima a 0, entonces el proceso inverso con el nuevo contenido se desvanezca.

    3) Hay un montón de excelentes manipulación DOM efectos que ya existen, la búsqueda de cool jquery conmutación de contenido, etc, vas a encontrar un montón de cosas.

  3. 1

    Hice un flip Menú que usted quizás podría usar, tiene un poco de un fallo en la primera carga, pero estoy seguro que es algo de menor importancia..

    Visita jsfiddle

    CSS:

    .switch-selection
    {
    display: block;
    position: absolute;
    z-index: 1;
    top: 2px;
    left: 2px;
    width: 130px;
    height: 22px;
    background: #fbfbfb;
    border-radius: 3px;
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
    -webkit-transition: left 0.15s ease-out;
    -moz-transition: left 0.15s ease-out;
    -o-transition: left 0.15s ease-out;
    transition: left 0.15s ease-out;
    -moz-border-radius: 3px; /* Firefox */
    -webkit-border-radius: 3px; /* Safari, Chrome */
    -khtml-border-radius: 3px; /* KHTML */
    border-radius: 3px; /* CSS3 */
    }
  4. 0

    La única manera para hacer animaciones como la que se está describiendo es la manipulación del DOM. No hay muchas maneras no puedo pensar en hacer esto sin el uso de javascript.

    Con el uso de HTML puro, puede crear una plantilla que es idéntico para la vid a y B, luego en un POSTE de cambio entre los dos, sin embargo esto no hará que la animación como el que usted desea.

  5. 0

    Para la solución para que funcione en todos los browser ver aquí.
    El principio es.
    – colocar un div en otro.
    -girar en div para que mire hacia atrás.
    – y Gire ambos divs en hover para que su efecto de girar la página.

    • Si usted es afiliado con este sitio web, tenga en cuenta que debe revelar su afiliación en el post en sí. Gracias!

Dejar respuesta

Please enter your comment!
Please enter your name here