Aprende a Crear un Efecto de Giro y Zoom con CSS3

El CSS

La primera tarea es crear la animación base con @-{vendor}-keyframes:

@keyframes rotater  { 
0% {  transform : rotate ( 0 )  scale ( 1 )  } 
50% {  transform : rotar ( 360 grados )  scale ( 2 )  } 
100% {  transform : rotar ( 720 grados )  scale ( 1 )  } 
}

La propiedad -webkit-transform es el animador en esta animación. Defina que al 0% el elemento está a 0 rotaciones y se lo escala a 1 – ese es el estado original del elemento. Al 50% de la animación, el elemento debe rotar 360 grados (un giro completo), y el elemento debe crecer dos veces. Al 100%, el elemento debe volver a su escala original y girar a 720 grados, por lo que tiene el mismo aspecto que cuando comenzó.

Con nuestra animación nombrada creada, es hora de aplicar la animación a un elemento en su estado de desplazamiento:

a .advert : hover  {  
	/ * safari / chrome / mozilla * / 
	nombre-animación : rotater ;  
	animación-duración : 500 ms ;  
	recuento de iteración-animación : 1 ;  
	animation-timing-function : ease-out ;

	/ * * Ópera / 
	-o-transform : rotación ( 360 grados )  escala ( 2 ) ; 
	-o-transition-duration : 500 ms ; 
	-o-transition-timing-function : ease-out ;

	/ * Es decir * / 
	-ms-Transform : rotate ( 360 ° )  escala ( 2 ) ; 
	-ms-transform-duration : 500 ms ; 
	-ms-transform-timing-function : ease-out ; 
}

El evento se asigna usando la  -webkit-animation-namepropiedad. Se asignan propiedades adicionales:   -webkit-animation-durationhace que la animación dure 500 milisegundos,  -webkit-animation-iteration-countdirige la animación para que se produzca solo una vez y  -webkit-animation-timing-functionestablece la transición de suavizado a la relajación.

Recomiendo usar este efecto con nodos DOM de tamaño fijo, con imágenes de fondo. Usar este efecto con nodos DOM simples no se ve muy bien. Déjame saber lo que piensas acerca de esta animación, y lo que crees que podría usar para verse aún mejor.

Te esperamos en los siguientes artículos en donde hablaremos mas acerca de estos temas, los cuales hoy en día son de vital importancia en el mundo de la tecnología.