Cum să faci o rotaţie şi un zoom în CSS 3?

Tehnologia browserelor evoluează iar o dată cu ea, aplicarea unor efecte asupra paginilor noastre web se face din ce în ce mai simplu. Simpla rotaţie a unei fotografii se poate realiza în Javascript de foarte mulţi ani, dar complexitatea codului este una ridicată. De o dificultate similară se „bucură” şi zoom-ul în Javascript.

Aici a intervenit CSS 3, tehnologie relativ nouă, dar care este suportată tot mai bine de browserele moderne.

Codul CSS

Primul pas constă în crearea animaţiei de bază :

@-webkit-keyframes rotater {
0% { -webkit-transform:rotate(0) scale(1) } /*-webkit-transform este  animatorul animaţiei */
50% { -webkit-transform:rotate(360deg) scale(2) }
100% { -webkit-transform:rotate(720deg) scale(1) }
}

Aplicăm animaţia evenimentului hover a unei imagini :

a.advert:hover { 
	-webkit-animation-name:rotater; 
	-webkit-animation-duration:500ms; 
	-webkit-animation-iteration-count:1; 
	-webkit-animation-timing-function:ease-out;
	
	-moz-transform:rotate(720eg) scale(2); 
	-moz-transition-duration:500ms; 
	-moz-transition-timing-function: ease-out;
}

Aici sunt folosiţi mai mulţi parametri, printre care -webkit-animation-duration ce specifică durata animaţiei, -webkit-animation-iteration-count numărul rotaţiilor, -webkit-animation-timing-function specifică modul în care se relaxează imaginea.

Demo

Aici.