• Acasă
  • Despre noi
  • Autori
  • Mărturii
  • Arhivă
  • Trimite Articol
  • Contact

WORLDIT

Lumea în 1 și 0.

  • Știri
    • Tehnologie
    • Tehnologie mobilă
    • Securitate
    • Developers
    • Știință
    • Benzi desenate
    • Jocuri
    • Intern
  • Tehnic
    • Browser
    • C#
    • C/C++
    • Challenge
    • HTML/CSS
    • Javascript, Ajax, jQuery
    • Open Source
    • PHP
    • Python
    • Securitate IT
    • Socializare
    • WordPress
    • Altele
  • Recenzii
  • Interviuri
  • Evenimente

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

3
  • Publicat de Andrei Avădănei
  • în HTML/CSS · Tehnic
  • — 29 mart., 2011 at 9:00 am

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.

Etichete: csscss3cum sa faci o rotatie in csscum sa faci zoom in cssrotatie in csstutorialtutorial css3zoom in css

— Andrei Avădănei a scris 1246 articole

Andrei scrie pe worldit.info din vara lui 2011. Este fondatorul Asociatiei Centrul de Cercetare in Securitate Informatica din Romania - CCSIR si coordoneaza DefCamp, cea mai importanta conferinta de securitate informatica & hacking din Europa Centrala si de Est. Andrei ofera in cadrul Bit Sentinel servicii de securitate informatica, penetration testing, security management, recuperarea de pe urma unui atac cibernetic, training-uri si workshop-uri.

  • Articolul anterior WFC 01 – soluţie şi rezultate
  • Articolul următor Mozilla Firefox 4 este un browser sigur

3 Comentarii

  1. Fanache A. Remus spune:
    martie 29, 2011 la 11:36 am

    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.

  2. Andrei Avădănei spune:
    martie 29, 2011 la 11:45 am

    Ma bucur sa aud asta. 🙂

  3. GiacomO spune:
    aprilie 15, 2011 la 10:43 pm

    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.


  • Facebook

    WorldIT.info
  • Ultimele Atacuri Cibernetice din Romania – RO Hacked

    [wp_rss_retriever url="https://rohacked.bit-sentinel.com/feed/" excerpt="none" items="5" read_more="false" new_window="true" thumbnail="false" cache="0"] RO Hacked este registrul atacurilor cibernetice din România.
  • Caută

  • Articole Recomandate

    • Recent Posts
    • Tags
    • Număr record de participanți la DefCamp 2015, cel mai important eveniment dedicat securității cibernetice din Europe Centrala si de Estdecembrie 2, 2015
    • La DefCamp 2015 vei afla prin ce tehnici pot fi evitate măsurile de securitate ale sistemelor informatice criticeoctombrie 16, 2015
    • Ultima sansa sa rezervi bilete de tip Early Bird la DefCamp 2015septembrie 1, 2015
    • 15 sfaturi despre cum poti deveni un programator bun venite de la specialisti romaniaugust 4, 2015
    • algoritmica Android antivirus Apple Avadanei Andrei benzi desenate BitDefender blog browser C++ Chrome concurs eveniment Facebook Firefox Google google chrome hacking html5 infografic informatica internet Internet Explorer IT javascript linux Microsoft Mozilla Firefox online PHP programare retea sociala review Romania securitate Tehnologie Twitter web Windows Windows 7 Wordpress WorldIT worldit.info Yahoo! YouTube
  • mai 2022
    L Ma Mi J V S D
     1
    2345678
    9101112131415
    16171819202122
    23242526272829
    3031  
    « dec.    
  • Link-uri Sponsorizate

    • laptop second hand

    • Calculatoare Second Hand

    • cod voucher pc garage

  • Home
  • Tehnic
  • HTML/CSS
  • Cum să faci o rotaţie şi un zoom în CSS 3?
  • Important

    • Bit Sentinel
    • Centrul de Cercetare în Securitate Informatică din România
    • DefCamp
  • Prieteni

    • BetiT.ro
    • bijuterii handmade
    • Computerica | Resurse gratuite PC
    • Descopera.org
    • Gadgeturi si IT – Giz.ro
  • Prieteni

    • PC – Config
    • RO Hacked
    • Stiri IT

Copyright © 2009-2014 WORLDIT. Toate drepturile Rezervate.
Termeni și condiții | Contact | Licența Creative Commons