El efecto flip es una animación que podemos aplicar en nuestras páginas web de manera muy sencilla pero que proporciona un aspecto visual muy llamantivo.
Ejemplo
Lo primero vamos a crear las dos caras del cubo, por ejemplo un div con la clase "flip" y otro div con la clase "flop", ambos en un div contenedor llamado "cube":
FLIP
FLOP
A continuación posicionamos las caras con las propiedades transform y rotate
.flip{
-webkit-transform: translateZ(160px);
transform: translateZ(160px);
}
.flop {-webkit-transform: rotateX(-90deg) translateZ(-160px);
transform: rotateX(-90deg) translateZ(-160px);
}
Para conseguir el efecto 3d aplicamos los siguientes estilos en la capa contenedora "cube":
.cube {
-webkit-transition: -webkit-transform .33s;
transition: transform .33s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
Por último añadimos los estilos cuando se haga hover:
.cube:hover {
-webkit-transform: rotateX(89deg);
transform: rotateX(89deg);
}
El resultado es el siguiente:
FLIP
FLOP
Compatibilidad en navegadores
 |
 |
 |
 |
 |
||
|---|---|---|---|---|---|---|
| >IE7 | IE8 | IE9< | ||||
 |
|
|
|
 |
|
|