Cum să faci o rotaţie şi un zoom în CSS 3?
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.
E amuzanta chestia, am implementat-o la poza de la jocul meu online, pacat insa ca nu functioneaza in acest moment decat in chrome si ff.
Ma bucur sa aud asta. 🙂
Am văzut noile chestii css în mozilla, plus html 5. Se poate accesa ușor lăsând pagina de start care este configurată în mozilla 4 și unul din mesajele alea spune ceva de web o wonder, de acolo poți explora mai multe lucruri.