Morton 29 de julio de 2012 a las 15.36
   Imprimir artículo
elWebmaster.com

Efecto 3D en tus imágenes al estilo Google+, con HTML y CSS


google-1-wide1Google 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.

Haz clic aquí para ver una demostración >>

Primero, hay una serie de elementos HTML que necesitan colocarse para poder dar contexto al efecto:

  1. <div id="container">
  2.   <div class="parent1">
  3.     <div class="parent2">
  4.       <div class="parent3">
  5.         <!-- El contenido va aquí -->
  6.       </div>
  7.     </div>
  8.   </div>
  9. </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:

  1. /* Estado estático */
  2. #container   { width: 400px; height: 400px; position: relative; border: 1px solid #ccc; }
  3. .parent1   {
  4.   /* contenedor de la animación */
  5.   height: 0;
  6.   overflow: hidden;
  7.  
  8.   -webkit-transition-property: height;
  9.   -webkit-transition-duration: 1s;
  10.   -webkit-perspective: 1000px;
  11.   -webkit-transform-style: preserve-3d;
  12.  
  13.   -moz-transition-property:height;
  14.   -moz-transition-duration: 1s;
  15.   -moz-perspective: 1000px;
  16.   -moz-transform-style: preserve-3d;
  17.  
  18.   -o-transition-property:height;
  19.   -o-transition-duration: 1s;
  20.   -o-perspective: 1000px;
  21.   -o-transform-style: preserve-3d;
  22.  
  23.   transition-property: height;
  24.   transition-duration: 1s;
  25.   perspective: 1000px;
  26.   transform-style: preserve-3d;
  27. }
  28. .parent2  {
  29.   /* el contenido total durante la animación va aquí */
  30. }
  31. .parent3  {
  32.   /* el bloque que será animado*/
  33.   height: 56px;
  34.  
  35.   -webkit-transition-property: all;
  36.   -webkit-transition-duration: 1s;
  37.   -webkit-transform: rotateX(-90deg);
  38.   -webkit-transform-origin: top;
  39.  
  40.   -moz-transition-property: all;
  41.   -moz-transition-duration: 1s;
  42.   -moz-transform: rotateX(-90deg);
  43.   -moz-transform-origin: top;
  44.  
  45.   -o-transition-property: all;
  46.   -o-transition-duration: 1s;
  47.   -o-transform: rotateX(-90deg);
  48.   -o-transform-origin: top;
  49.  
  50.   transition-property: all;
  51.   transition-duration: 1s;
  52.   transform: rotateX(-90deg);
  53.   transform-origin: top;
  54. }
  55.  
  56. /* Estados hover que disparan las animaciones */
  57. #container:hover .parent1  { height: 111px; }
  58. #container:hover .parent3  {
  59.   -webkit-transform: rotateX(0deg);
  60.   -moz-transform: rotateX(0deg);
  61.   -o-transform: rotateX(0deg);
  62.   transform: rotateX(0deg);
  63.   height: 111px;
  64. }

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!

Haz clic aquí para ver una demostración >>

Fuente original del artículo: David Walsh Blog
Traducción realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder