Efecto de rotación con CSS

January 14 2010, 1:43pm

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:

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

No hay entradas relacionadas.