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>
No olvide escribir su comentario!!!
no funciona el enlace al ejemplo en vivo =/
ResponderEliminarbuenisimo!! jjajaja es genial cuando compila! :D
ResponderEliminarFunciona genial
ResponderEliminarurl de ejemplo no existe
ResponderEliminarno existe el ejemplo
ResponderEliminarno funciona el ejemlo en vivo
ResponderEliminar