Efecto coverflow con CSS

El efecto Coverflow es muy conocido y es usado en muchas situaciones, este efecto es normal verlo en la web usando jQuery, flash u otro lenguaje y en varias aplicaciones, en este tutorial vamos a hacer este ejercicio y crearemos este efecto coverflow, para esto utilzaremos una lista de html y usando las bondades de CSS lo conseguiremos facilmente, en este tutorial vamos a usar Transiciones, transformaciones y perspectivas de Css3.

ver ( Cajas Informativas tipo menú animadas con CSS3 )

Esto es lo que vamos a conseguir en este tutorial:

Ver Demostración

efecto-coverflow-css

El html

Únicamente necesitaremos una lista desordenada <ul>, dentro de sus respectivos ítems <li> tenemos las imágenes, un párrafo <p> y el botón para visitar el vinculo deseado.

efecto-coverflow-1

El css

Damos las dimensiones a la lista altura y anchura y aplicamos una perspectiva de 500px, y centramos la lista en el documento con el margin.
Aplicamos color a los item de la lista que serán las cajas, los mostramos uno al lado del otro con inline-block, margin y box-sizing, aplicamos una transformación en el eje Y de 45º y una transición para dar la elegancia al evento cada propiedad con sus prefijos de autores, por si algo pasa e igual le damos un alto a las cajas y padding.
Estilos para el párrafo que esta dentro de las cajas.
efecto-coverflow2
Estilos para el botón que lleva a los detalles del producto,  aplicamos el fondo del botón en el estado inactivo y otras opciones para lograr la apariencia de botones en Css, por ultimo aplicamos una transición al color de fondo para cuando cambie de estado  y aplicamos los estilos para el estado hover.
Damos un ancho a la imagen que se encuentra dentro de la caja y la altura será relativa a su anchura.

efecto-coverflow-css3

Ahora nos referimos a los ítems de la lista y su comportamiento tanto en el estado pasivo como en el hover, utilizamos la pseudo class nth-child, first-child, last-child para aplicar las rotaciones y posiciones adecuada, también aplicamos estilos al botón que tenemos como enlace.

efecto-coverflow-css4

Y esto es todo, en este corto tutorial vemos un poco el poder de las propiedades de Css3, y vemos que podemos hacer cosas muy Cool.

———————
Demo

Archivos del Ejercicio

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

6 Respuestas

  1. Yoshi dice:

    Si funciona pero tengo más imágenes colocadas en y todas se convierten en coverflow, cómo podría llamar específicamente a determinadas imágenes. Gracias.

  2. YESSICA ARMIDA FERNANDEZ dice:

    Me parecio muy interesante y funciona genial

  1. enero 16, 2014

    Me parecio muy interesante y funciona genial