Efecto de Rotacion con CSS

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%.

Código:

-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.

Código:

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:

Código:

<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.

Código:

.contenedor img:hover /*tiene que ser hover para que cuando pase el cursos por encima pueda haerse el efecto de rotacion*/  {
-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