Efecto de Rotacion con CSS

Ir abajo

Ir al ultimo mensaje Efecto de Rotacion con CSS

Mensaje por Gamexcheats el Vie Sep 10, 2010 10:00 pm

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

___________________________________

Te Gusto el Foro? Recomindanos a tus amigos Wink
Hola Invitado, Bienvenido a la Comunidad GameXcheats

avatar
Gamexcheats
Admin
Admin

Mensajes : 20
Reputación : 1
Fecha de inscripción : 26/07/2010
Edad : 24
Localización : Mexico

Ver perfil de usuario http://gamexcheats.site40.net

Volver arriba Ir abajo

Volver arriba

- Temas similares

 
Permisos de este foro:
No puedes responder a temas en este foro.