viernes, 17 de diciembre de 2010

Rotar imágenes con animación Css 3D

Funciona en:
Para rotar imágenes utilizando Css simplemente tendremos que utilizar la función
rotate3d(0, 0, 0, 90deg), dónde los tres primeros parámetros (en este caso son 0) sirven para indicar las inclinaciones de la imagen (se trata de ir jugando con ellos para crear el efecto deseado) y el 90deg son los grados de inclinación de la imagen que se podrían modificar por ejemplo con 360deg. Primeramente vamos a ver el ejemplo simple de girar imagen (para mejorar la estética como en otros tutoriales hemos añadido -webkit-transition: 3s ):
<style>
#imagen:hover{
    -webkit-transition: 3s;
-webkit-transform: rotate3d(0,0,0, 360deg);
}
</style>
</head>
<body>
<img id="imagen" src="jordan.jpeg" width="300" height="297" >
</body>
Ahora vamos a jugar un poco con el primer parámetro para lograr este efecto:
#imagen:hover{
-webkit-transition: 3s;
-webkit-transform: rotate3d(100,0,0, 360deg);
}
</style>
Recordamos que el número 100 lo he puesto de ejemplo, podría ser cualquier número. Ahora vamos a modificar los 3 parámetros para crear un bonito efecto:
<style>
#imagen:hover{
-webkit-transition: 3s;
-webkit-transform: rotate3d(100,100,100, 360deg);
}
</style> 
Para ver el ejemplo en vivo haga click en el siguiente botón:
No olvide escribir su comentario!!!

5 comentarios: