Las animaciones en tu sitio web hacen más interesantes e interactivos la navegación en el mismo, por eso en el siguiente tutorial te enseñaremos a crear de manera sencilla el efecto flip.
Empezaremos con el código en el html que necesitaremos, iniciando con el div que le agregaremos la clase (class=»container»), dentro de este agregamos otro div con la clase (class=»card»), y adentro pondremos las 2 caras de la tarjeta en 2 div separados, el primero con la clase (class=»front») que sería la cara frontal, y el segundo con la clase (class=»back») que sería la cara trasera de la tarjeta; el código html quedaría de esta manera:
6 | <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. .</p> |
11 | <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. .</p> |
Codigo CSS
A continuación indicaremos el código css necesario para crear la animación:
11 | -webkit-perspective: 800px; |
12 | -moz-perspective: 800px; |
24 | -webkit-transition: -webkit-transform 0.4s; |
25 | -moz-transition: -moz-transform 0.4s; |
26 | -o-transition: -o-transform 0.4s; |
27 | transition: transform 0.4s; |
28 | -webkit-transform-style: preserve-3d; |
29 | -moz-transform-style: preserve-3d; |
30 | -o-transform-style: preserve-3d; |
31 | transform-style: preserve-3d; |
37 | -webkit-transform: rotateY( 180deg ); |
38 | -moz-transform: rotateY( 180deg ); |
39 | -o-transform: rotateY( 180deg ); |
40 | transform: rotateY( 180deg ); |
55 | -webkit-backface-visibility: hidden; |
56 | -moz-backface-visibility: hidden; |
57 | -o-backface-visibility: hidden; |
58 | backface-visibility: hidden; |
59 | box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25); |
71 | -webkit-transform: rotateY( 180deg ); |
72 | -moz-transform: rotateY( 180deg ); |
73 | -o-transform: rotateY( 180deg ); |
74 | transform: rotateY( 180deg ); |
El Resultado visual de cada una de las caras seria:
Codigo Jquery
Para poder hacer funcionar la animación al hacer click en la cara frontal y trasera de la tarjeta crearemos una función con jquery, utilizaremos .toggleclass para poder volver a voltear las caras todas la veces deseadas.
1 | $('.card').click(function(){ |
2 | $(this).toggleClass('flipped'); |
Y asi de manera sencilla lograríamos el efecto flip en nuestro sitio web.
Me gusta esto:
Me gusta Cargando...
Relacionado
puedes decirme que efecto usa una pagina en sus div por favor muchas gracias…
esta es la pagina http://beta.wind-and-words.com/
Hola Alejandro.
Por lo que veo en esta página utilizan Pixi.js, una librería para hacer render 2D con WebGL.
Saludos.