Cómo crear un efecto de volteo de tarjeta en DIV usando javascript

Question

Quiero crear un efecto de volteo de tarjeta (lo mismo que transiciones de webkit y transformaciones 3D) en DIV usando javascript y librerías CSS y NO o plugins. ¿Cómo puedo conseguir esto? Como la mayoría de las propiedades CSS3 funcionan para navegadores webkit. Y la mayoría de las soluciones javascript usa bibliotecas como jquery y sus complementos. Estoy buscando una solución que no use ninguna biblioteca, pero solo javascript/CSS y que funcione de manera cruzada.

Cualquier ayuda sería apreciada.

Saludos, manishekhawat

Answer 1

transformaciones 3D CSS3 en la actualidad sólo funcionan en los navegadores WebKit. Lo sentimos, no hay forma de hacer esto en otros navegadores sin utilizar un polyfill JS como cssSandpaper (http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/).

No obstante, esto no se recomienda, ya que provocará una disminución grave del rendimiento al cargar la versión JS.

Las transformaciones 3D y las animaciones de fotogramas clave siguen siendo una característica (bastante) nueva de las especificaciones CSS3, por lo que solo se adoptan en los navegadores más actualizados (safari, chrome). Si desea una solución de varios navegadores que no requiera javascript, tendrá que permanecer sentado durante algunos años.

Answer 2

Cómo implementarlo:

animaciones CSS son un montón de diversión; la belleza de ellos es que a través de muchas propiedades simples, puede crear cualquier cosa, desde un desvanecimiento elegante hasta un efecto WTF-Pixar-sería-orgulloso. Un efecto CSS en algún lugar intermedio es el efecto de cambio de CSS, por el cual hay contenido tanto en la parte frontal como posterior de un contenedor determinado. Este tutorial le mostrará mostrar para crear ese efecto de la manera más simple posible.

El HTML

La estructura HTML para lograr el efecto de dos caras es como era de esperar que sea:

<div class="flip-container" ontouchstart="this.classList.toggle('hover');"> 
    <div class="flipper"> 
     <div class="front"> 
      <!-- front content --> 
     </div> 
     <div class="back"> 
      <!-- back content --> 
     </div> 
    </div> 
</div> 

Hay dos paneles de contenido "delanteros" y "atrás", como era de esperar, pero también dos elementos que contienen funciones muy específicas explicadas por su CSS. También tenga en cuenta la pieza ontouchstart que permite que los paneles se intercambien en pantallas táctiles.

El CSS

/* entire container, keeps perspective */ 
.flip-container { 
    perspective: 1000; 
} 
    /* flip the pane when hovered */ 
    .flip-container:hover .flipper, .flip-container.hover .flipper { 
     transform: rotateY(180deg); 
    } 

.flip-container, .front, .back { 
    width: 320px; 
    height: 480px; 
} 

/* flip speed goes here */ 
.flipper { 
    transition: 0.6s; 
    transform-style: preserve-3d; 

    position: relative; 
} 

/* hide back of pane during swap */ 
.front, .back { 
    backface-visibility: hidden; 

    position: absolute; 
    top: 0; 
    left: 0; 
} 

/* front pane, placed above back */ 
.front { 
    z-index: 2; 
    /* for firefox 31 */ 
    transform: rotateY(0deg); 
} 

/* back, initially hidden pane */ 
.back { 
    transform: rotateY(180deg); 
} 

Aquí hay una visión general del proceso:

• El contenedor periférica establece perspectiva toda el área de la animación de

• El recipiente interior es el elemento que realmente gira, gira 180 grados cuando el contenedor primario está sobrevolado. Aquí también es donde controla la velocidad de transición. Cambiando la rotación a -180deg gira los elementos en la dirección inversa.

• Los elementos frontal y posterior están posicionados de forma absoluta para que puedan "superponerse" entre sí en la misma posición; la visibilidad de la cara posterior está oculta, por lo que la parte posterior de los elementos volteados no se visualiza durante la animación .

• El elemento frontal tiene un mayor índice z que el elemento de nuevo de modo que el elemento frontal puede codificarse primero pero todavía muestra en la parte superior

• El elemento de espalda es girar 180 grados, de modo que actúe como la parte de atrás.

¡Eso es todo! ¡Pon esta estructura simple en su lugar y luego diseña cada lado como quieras!

tirón CSS Toggle

Si prefiere el único elemento flip en el comando a través de JavaScript, un simple conmutador de clase CSS hará el truco:

.flip-container:hover .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper 
{ 
    transform: rotateY(180deg); 
} 

Adición de la clase del tirón a la el elemento del contenedor volteará la tarjeta usando JavaScript - no se requiere vuelo estacionario del usuario. Un comentario de JavaScript como

document.querySelector("#myCard").classList.toggle("flip") hará el cambio!

CSS Voltear vertical

Realizar un giro vertical es tan fácil como apretar el eje y añadiendo el valor de transformación-eje al origen. El origen de la tapa debe ser actualizado y la tarjeta de girar a la inversa:

.vertical.flip-container { 
    position: relative; 
} 

    .vertical .back { 
     transform: rotateX(180deg); 
    } 

    .vertical.flip-container .flipper { 
     transform-origin: 100% 213.5px; /* half of height */ 
    } 

    .vertical.flip-container:hover .flipper { 
     transform: rotateX(-180deg); 
    } 

se puede ver que el acceso X se acostumbra, no el Y.

Todo el crédito va al desarrollador David Walsh, Acabo de reproducir el contenido.