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