Descriere: Cum sa faci o rotatie si un zoom in CSS 3?
Download:
Autor: Anonim
Sursa (Link-ul oficial): Propria parere: Folositor.
Tutorialul:
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ă:
Cod: Selectaţi tot
@-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) }
}Cod: Selectaţi tot
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;
}