Crear un efecto giratorio y de zoom en las imágenes [CSS] - Trucodigo

Crear un efecto giratorio y de zoom en las imágenes [CSS]




Con este código CSS puedes hacer que una imagen o un enlace gire 360 grados y tenga un efecto zoom hasta volver a la normalidad:

@-webkit-keyframes rotater {
0% { -webkit-transform:rotate(0) scale(1) }
50% { -webkit-transform:rotate(360deg) scale(2) }
100% { -webkit-transform:rotate(720deg) scale(1) }
}

a.advert { width:125px; height:125px; display:block; }
a.advert:hover {
/* safari / chrome */
-webkit-animation-name:rotater;
-webkit-animation-duration:500ms;
-webkit-animation-iteration-count:1;
-webkit-animation-timing-function: ease-out;

/* mozilla */
-moz-transform:rotate(360deg) scale(2);
-moz-transition-duration:500ms;
-moz-transition-timing-function: ease-out;

/* opera */
-o-transform:rotate(360deg) scale(2);
-o-transition-duration:500ms;
-p-transition-timing-function: ease-out;

/* ie */
-ms-transform:rotate(360deg) scale(2);
-ms-transform-duration:500ms;
-ms-transform-timing-function: ease-out;
}
Tags
Opciones
Estadísticas
Creado 26.12.2013 a las 20:15 hs
Categoría Css
  • 0
    Medallas
  • 0
    Favoritos
  • 1184
    Visitas
  • 0
    Puntos
  • 0
    Seguidores
Posts relacionados
Comentarios
0
Cargando comentarios espera un momento...
No tienes permisos para comentar.

Para poder comentar necesitas estar Registrado. O.. ya tienes usuario? Logueate!
Patrocinador
Autor del post
Ver perfil de Omaredomex Omaredomex
Hombre Administrador  Mensaje
0 81 2
Medallas
No tiene medallas
Últimos visitantes