Con el efecto FLIP (girar) con css3 , podemos mostrar algún tipo de información de forma agradable al usuario, cuando este interactué con nuestro sitio web. Como podrán ver en el Efecto-Flip de este tutorial css hemos aplicado el efecto simulando el giro de un naipe.
HTML
La estructura HTML constara de 2 caras: FRONT – BACK , asi mismo 2 elementos que cumplen un rol especifico, que sera explicado en el css.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<!-- Front -->
<div class="front">
<span>Front</span>
</div>
<!-- BACK -->
<div class="back">
<span>Back</span>
</div>
</div>
</div> |
Como podrás notar hemos agregado ontouchstart para indicar que se realizara un Toggle(agregar – quitar) en pantallas touch.
CSS
Haciendo uso de las propiedades que nos brinda css transforms, podremos modificar nuestros elementos para lograr el efecto flip y te sorprenderás de lo simple que es realizarlo.
En los comentarios del css podremos entender que es lo que realiza cada propiedad de css transform, también se ha omitido el uso de prefijos de los navegadores(webkit, moz, ms, etc…).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | /* Asignamos perspectiva a nuestro contenedor */ .flip-container { perspective: 1000; border: 1px solid #d9d9d9; /* Para Firefox - IE10+ debemos agregar propiedades extras */ -moz-transform-style: preserve-3d; -moz-transform: perspective(1000px); -ms-transform-style: preserve-3d; -ms-transform: perspective(1000px); } .flip-container, .front, .back { width: 280px; height: 320px; } /* preserve-3d: Indicamos que todo elemento hijo del div flipper estara en un espacio 3D XYZ */ .flipper { transition: 0.6s; transform-style: preserve-3d; position: relative; } .front, .back { /* Backface: Nos permite ocultar la parte posterior de los elementos html */ /* en este caso FRONT - BACK */ backface-visibility: hidden; transition: 0.6s; transform-style: preserve-3d; position: absolute; top: 0; left: 0; } /* FRONT: eje Y = 0 */ .front { transform: rotateY(0deg); background: #bcea67; } /* BACK: eje Y = -180, se mantendra oculto */ .back { transform: rotateY(-180deg); background: #ffdd54; } |
Efecto Flip
Ahora para hacer que la magia suceda solo necesitamos agregar un par de lineas en nuestro css. Indicando que cuando suceda un :hover en nuestro contenedor .flip-container, el div .front y .back giren en su eje Y produciendo el efecto.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | /* Hover */ .flip-container:hover .front { transform: rotateY(180deg); } .flip-container:hover .back { transform: rotateY(0deg); } /* Toggle - Moviles */ .flip-container.hover .front { transform: rotateY(180deg); } .flip-container.hover .back { transform: rotateY(0deg); } |
También se ha creado la clase .hover, esta sera utilizada para poder realizar el toggle, mencionado anteriormente, ya que en pantallas touch no se permite el :hover.
Flip Vertical
Agregando una clase .vertical y modificando algunas pocas propiedades lograremos este otro efecto.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | /* Flip Vertical */ .vertical.flip-container{ position: relative; } .vertical.flip-container .flipper{ transform-origin: 100% 200px; } .vertical .back{ transform: rotateX(180deg); } .vertical.flip-container:hover .back{ transform: rotateX(0deg); } .vertical.flip-container:hover .front{ transform: rotateX(180deg); } |
Este efecto podrá ser apreciado en browsers modernos que soportan propiedades css3 como transition, transform.
Muchas gracias. Lo probaré 😉
Genial!!, que le debería agregar al código para triplicar las cajas que en lugar de ser 1 sean 3 en fila