Efecto Flip con CSS3

flip-css

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.

Suscribir
Notificar a
guest
3 Comentarios
Comentarios en línea
Ver todos los comentarios
Javier

Muchas gracias. Lo probaré 😉

0
Responder
rg

Genial!!, que le debería agregar al código para triplicar las cajas que en lugar de ser 1 sean 3 en fila

0
Responder
Administrador

Hola estimado, gracias por escribirnos.

El efecto FLIP funciona en base a clases de CSS, por tanto, agregando tres grupos debería funcionar bien.

0
Responder