Si queremos rotar elementos no es necesario JS ni Flash, con CSS podemos hacerlo y nuestra web resultará menos pesada.

Para este fin debemos hacer uso de la propiedad -transform, daremos un giro de 5 grados a nuestra imagen y la agrandaremos un 10%.

-moz-transform: rotate(5deg) scale(1.1);
-webkit-transform: rotate(5deg) scale(1.1);

Debemos usar -moz-transform para navegadores basados en el motor Gecko, y -webkit-transform para que funcione con Webkit. En Internet Explorer podemos usar un filtro, pero éste sólo funciona para ángulos con incremento de 90°, así que queda descartado.

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Como ejemplo podemos hacer una pequeña galería de fotos, en el código HTML sólo debemos agregar nuestras imágenes una después de otra, podríamos hacer uso de una lista desordenada también:

<div class="contenedor">
	<a href="#"><img src="img1.jpg" alt="Imagen 1" width="150" height="101" /></a>
	<a href="#"><img src="img2.jpg" alt="Imagen 2" width="150" height="101" /></a>
	<a href="#"><img src="img3.jpg" alt="Imagen 3" width="150" height="101" /></a>
	<a href="#"><img src="img4.jpg" alt="Imagen 4" width="150" height="101" /></a>
	<a href="#"><img src="img5.jpg" alt="Imagen 5" width="150" height="101" /></a>
	<!-- Y todas las imágenes que querramos -->
</div>

Ahora añadimos el CSS al pasar el mouse sobre el elemento img.

.contenedor img{
-moz-transform: rotate(5deg) scale(1.1);
-webkit-transform: rotate(5deg) scale(1.1);
-moz-box-shadow: 0px 1px 3px rgb(0,0,0);
-webkit-box-shadow: 0px 1px 3px rgb(0,0,0);
border: 5px solid #CCC;
margin: -5px;
position: relative;
}

Hemos agregado sombra en RGB para que sea negra independiente del fondo y restado 5 píxeles del margen para evitar que los demás elementos se muevan, puesto que también tenemos un borde.

Lo malo: esto no es un standar aún.

Ver DEMO | Descargar

Etiquetas: CSS, demos, galerías, imágenes, xhtml