Google Plus brinda mucha inspiración a desarrolladores front-end, especialmente cuando se trata de CSS y Javascript. En este artículo vamos a aprender a duplicar un interesante efecto que seguramente ya habrás visto en ciertas imágenes de esta red social: un mapa (u otro contenido) que se despliega desde la parte superior al pasar el mouse.
Primero, hay una serie de elementos HTML que necesitan colocarse para poder dar contexto al efecto:
<div id="container"> <div class="parent1"> <div class="parent2"> <div class="parent3"> <!-- El contenido va aquí --> </div> </div> </div> </div>
El primer elemento padre define el estado 3D, tel segundo elemento padre contendrá el código totalmente visible durante la animación, y el tercer elemento padre es el que más distinto se verá durante el progreso de la animacíon.
El CSS para completar esta animación es curioso y por sobre todo, breve:
/* Estado estático */
#container { width: 400px; height: 400px; position: relative; border: 1px solid #ccc; }
.parent1 {
/* contenedor de la animación */
height: 0;
overflow: hidden;
-webkit-transition-property: height;
-webkit-transition-duration: 1s;
-webkit-perspective: 1000px;
-webkit-transform-style: preserve-3d;
-moz-transition-property:height;
-moz-transition-duration: 1s;
-moz-perspective: 1000px;
-moz-transform-style: preserve-3d;
-o-transition-property:height;
-o-transition-duration: 1s;
-o-perspective: 1000px;
-o-transform-style: preserve-3d;
transition-property: height;
transition-duration: 1s;
perspective: 1000px;
transform-style: preserve-3d;
}
.parent2 {
/* el contenido total durante la animación va aquí */
}
.parent3 {
/* el bloque que será animado*/
height: 56px;
-webkit-transition-property: all;
-webkit-transition-duration: 1s;
-webkit-transform: rotateX(-90deg);
-webkit-transform-origin: top;
-moz-transition-property: all;
-moz-transition-duration: 1s;
-moz-transform: rotateX(-90deg);
-moz-transform-origin: top;
-o-transition-property: all;
-o-transition-duration: 1s;
-o-transform: rotateX(-90deg);
-o-transform-origin: top;
transition-property: all;
transition-duration: 1s;
transform: rotateX(-90deg);
transform-origin: top;
}
/* Estados hover que disparan las animaciones */
#container:hover .parent1 { height: 111px; }
#container:hover .parent3 {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
height: 111px;
}
El estado estático de parent1 configura la transformación 3D y la perspectiva, comenzado en una altura de 0px. El estado estático de parent3, por otro lado, configura la transición y transformación de la rotación. Cuando posas el mouse sobre la imagen, las alturas de parent1 y parent3 se animan hasta la altura máxima, que es de 111px en este caso, y rotan a 0deg (0 grados), es decir, "mirando al frente".
Y eso es todo ¡Esperamos que te sea de utilidad!
