Galería de imágenes con CSS3

Usando las nuevas propiedades del CSS3, Alex and The Web ha creado una forma de mostrar imágenes en una galería muy particular y a la vez, muy sencilla de implementar porque no requiere ningún script.

Como todas estas cosas, funciona correctamente en Firefox (versión 3.6 en adelante), en Google Chrome y en Safari. En Opera y en Internet Explorer, la galería se ve si esos detalles pero aun así, puede usarse.

la imagen 1

la imagen 2

la imagen 3

la imagen 4

la imagen 5

la imagen 6

Creamos la galería con HTML, un DIV que la contendrá; dentro de este, agregaremos otros DIVs, tantos como imágenes querramos mostrar. A cada uno de ellos deberemos identificado con un ID único y adentro, colocaremos la imagen y eventualmente, un texto:

<div id="gallery">
  <div id="img1">
    <img src="URL_imagen_1">
    <span>un texto optativo para la imagen 1</span>
  </div>
  <div id="img2">
    <img src="URL_imagen_2">
    <span>un texto optativo para la imagen 2</span>
  </div>
  <div id="img3"> ....... seguimos agregando imágenes ....... </div>
</div>

Ahora, debemos establecer las propeidades de estilo, las agregamos antes de </head>:

<style>
/* es el rectángulo de la galería, definimos su tamaño total */
#gallery {
  height: 680px;
  margin: 20px auto;
  position: relative;
  width: 650px;
}
/* los rectángulo que contendrán cada una de las imágenes */
#gallery div {
  overflow: hidden;
  position: absolute;
  /* efectos opcionales */
  box-shadow: 3px 3px 50px #555;
  -moz-box-shadow: 3px 3px 50px #555;
  -webkit-box-shadow: 3px 3px 50px #555;
  -webkit-transition: all 1500ms linear;
  background-color: #444;
  opacity: 0.9;
}
/* el efecto hover sobre las imágenes las "endereza" */
#gallery div#img1:hover, #gallery div#img2:hover, #gallery div#img3:hover {
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  opacity: 1;
  z-index: 999;
}
/* los textos optativos */
#gallery span {
  background-color: #222;
  bottom: 5px;
  color: #ABC;
  font-size: 15px;
  font-weight: bold;
  padding: 2px 10px;
  position: absolute;
  right: 0;
  text-align: right;
  width: 40%;
}
/* ahora debemos definir la posicion y el giro de cada imagen */
#gallery #img1 {
  /* esto rota la imagen una catidad de grados a la izquierda (valores negativos) o hacia la derecha (valores positivos) */
  -moz-transform: rotate(-15deg);
  -webkit-transform: rotate(-15deg);
  /* esta es la posición dentro del rectángulo #gallerty y podemos usar left top right o bottom */
  left: 50px;
  top: 30px;
  /* esto indicará la capa, cuanto más bajo sea el valor, más abajo estará y permite superponerlas */
  z-index:1;
}
/* lo mismo hacemos con todas las demás, por ejemplo */
#gallery #img2 {
  -moz-transform: rotate(25deg);
  -webkit-transform: rotate(25deg);
  left:250px;
  top: 300px;
  z-index:7;
}
#gallery #img3 { ....... }
</style>

Y eso es todo. La imágenes aparecerán "desordenadas" y cuando coloquemos el puntero del ratón sobre ellas, se enderezarán y se mostrarán en primer plano. En Google Chrome y Safari, lo harán con una animación, en Firefox de forma directa y en el resto de los navegadores no se verán "torcidas" pero el efecto funcionará igual.