Žvilgsnis į CSS3 2D transformacijas
The Transformacijos modulis yra milžiniškas papildymas CSS3, tai reiškia, kaip mes manipuliuojame tinklalapio elementais į kitą lygį.
Yra keletas eksperimentų, kurie mane tikrai nustebina, pavyzdžiui, tokie pavyzdžiai. Tačiau mes nesiruošsime sukurti tik CSS piktogramos, kuri gali kažkaip paversti Autobotu, nes ji gali būti didžiulė ir ne visai tinkama naudoti ir realiame gyvenime.
Vietoj to, šį kartą grįšime ir peržiūrėsime CSS3 2D transformacijų pagrindus, kad pamatytume, kaip jis veikia pagrindiniame lygmenyje.
Sintaksė
CSS3 transformacijų modulis iš esmės leidžia mums tam tikru mastu paversti elementą, pvz., Versti, keisti, keisti ir nuplėšti.
Oficiali sintaksė yra transformuoti: metodas (vertė). Tačiau, kaip ir bet kurie kiti CSS3 puikūs papildymai, kurie vis dar yra ankstyvuose etapuose, dabartinėms naršyklėms vis dar reikia sintaksės versijos, kad paleistumėte transformacijas. Taigi, visa sintaksė pasirodys taip:
transformavimas: metodas (vertė); / * W3C oficiali sintaksė * / -o-transformacija: metodas (vertė); / * Opera 10.5+ * / -ms-transform: metodas (vertė); / * Internet Explorer 9.0+ * / -moz-transform: metodas (vertė); / * Firefox 3.6+ * / -webkit-transform: metodas (vertė); / * „Chrome“ / „Safari 3.2+“ *
Be to, aukščiau paminėtas metodas yra transformavimo funkcijos, kurią galima pakeisti vienu iš šių: išversti (), skalė(), pasukti () arba pasviręs ().
Vertė
Dauguma metodo vertės atitiks X ašis ir Y ašis. Jei prisiminsite „Dekarto“ koordinačių sistemą iš savo „Math“ klasės vidurinėje mokykloje, pagrindinis principas yra gana panašus, X ašis - tai horizontaliai linija ir Y ašis yra vertikaliai linija.
Išskyrus rotaciją. The rotacija naudos polinės koordinatės kuri yra išreikšta laipsniais nuo 0 iki 360.
Visų metodų vertės gali būti neigiamos arba teigiamos. Vis dėlto atkreipkite dėmesį, nes internetinis puslapis yra skaitomas iš eilės iš viršaus į apačią, todėl žiniatinklyje esanti „Y“ ašis veikia priešingai nei originalus Dekarto koordinatės principas. Tai reiškia, kad pridėjus neigiamą vertę Y ašis, vietoj to jis pereis į viršų.
Naudojant transformacijas
Dabar pažiūrėkime šį pagrindinį demonstravimą, kad pamatytume transformacijos procesą.
Aš verčiu
Negalima drumstyti su terminu versti, ji ne verčia užsienio kalbą. The versti čia iš tikrųjų yra elementų judėjimo būdas.
Metodas turi dvi reikšmes; X ir Y. X reikšmė kaip jau minėjome, elementas bus horizontaliai; į kairę arba į dešinę, kol Y vertė bus vertikaliai apačioje arba į viršų.
Dabar žiūrėkime keletą paprastų demonstracijų toliau:
div plotis: 100px; aukštis: 100px; transformuoti: versti (100px, 250px);
Pirmiau pateiktas fragmentas perkelia elementą 100px į dešinę ir 250 pikselių į apačią.
div plotis: 100px; aukštis: 100px; transformuoti: versti (100px, 0);
Pirmiau minėtas fragmentas perkelia elementą į dešinę 100px, nes mes nuliuojame Y ašį. Tada, jei norime perkelti elementą į kairę, reikia tik nustatyti X ašį neigiamai:
div plotis: 100px; aukštis: 100px; transformuoti: išversti (-100px, 0);
- „Versti“ demo
Alternatyviai, mes galime perkelti elementą į vieną kryptį su šiais atskirais metodais; translateX () ir išversti (), skirtumas yra tas, kad kiekvienas iš šių metodų priima tik vieną vertę.
Taigi, praktiškai kalbant, transformuoti: išversti (-100px, 0) taip pat yra lygus transformuoti: translateX (-100px).
II - Skalė
The skalė metodas leidžia mums padidinti arba sumažinti elementus nuo jo tikrojo dydžio. Skalės vertė yra tokia pati kaip ir versti aukščiau, jame taip pat yra X ir Y. Vienintelis skirtumas yra tai, kad mes nenurodome vieneto. Štai pavyzdys:
div plotis: 100px; aukštis: 100px; transformuoti: skalę (1.5);
Anksčiau pateiktas pavyzdys padidins div 1.5 arba 150% tikrojo dydžio, ir kadangi mes ją lygiai vertiname tiek X, tiek Y kryptimis, turime tik tai deklaruoti vienoje vertėje. Taip pat galite tai deklaruoti transformacija: skalė (1.5,1.5); jei norite išsamesnės informacijos, tai tik padarys tą patį.
Be to, jei norime sumažinti elementą, mes naudosime vertę nuo 0,999 iki absoliutaus 0, kaip ir toliau pateiktame pavyzdyje, kuris sumažins „div“ dydį 50% arba pusę:
div plotis: 100px; aukštis: 100px; transformacija: skalė (0,5);
Tačiau būkite atsargūs, jei nustatysite vertę absoliučią “0” div tiesiog išnyks, taigi, jei neturite pagrįstos priežasties tai padaryti, nenorėčiau to daryti.
- „Scale“ demonstracija
III - Pasukti
Kaip minėjome anksčiau šiame pranešime, pasukti metodas naudoja polines koordinates, todėl vertė nurodoma laipsniais. Štai du pavyzdžiai
Toliau pateiktas fragmentas sukasi div 30 laipsnių pagal laikrodžio rodyklę.
div plotis: 100px; aukštis: 100px; transformuoti: pasukti (30deg);
Neigiama vertė, kaip parodyta toliau pateiktame pavyzdyje, sukasi div priešinga kryptimi (prieš laikrodžio rodyklę) tuo pačiu laipsniu.
div plotis: 100px; aukštis: 100px; transformuoti: pasukti (-30deg);
- „Pasukti“ demonstraciją
IV - Skew
The pasviręs metodas leidžia mums sukurti lygiagrečią programą. Jame taip pat yra dvi X ir Y ašių vertės. Tačiau pati vertė nurodoma laipsniu, o ne linijiniais matavimais, kaip mes naudojame skalė arba versti metodas. Štai pavyzdys:
div plotis: 200px; aukštis: 100px; transformuoti: skew (30deg, 10deg);
- „Skew“ demonstracija
V - Daugialypis metodas
The transformuoti nuosavybė neapsiriboja vien tik vienu metodu, iš tikrųjų mes galime į vieną deklaraciją įtraukti kelis metodus:
div plotis: 100px; aukštis: 100px; transformuoti: translateX (100px) sukasi (45deg);
Pirmiau minėtas fragmentas perkelia elementą 100px į dešinę ir tuo pačiu metu sukasi 45 laipsnių kampu.
„Multiple Method“ demonstracija.
Pakeisti kilmę
The trans-kilmės - kaip rodo jo pavadinimas - naudojamas valdyti transformacijos pradžios tašką. Jei mes aiškiai nenurodome šios savybės su tokia sintakse transformacijos kilmė: X Y;, tada naršyklė nustatys numatytąją reikšmę, kuri yra 50% X ir 50% Y.
Dabar, jei nurodome transformuoti iki 0 (X) 0 (Y) transformacija prasidės viršutiniame kairiajame kampe.
Vėlgi, visoms naršyklėms dar reikia prefikso versijos, kad galėtumėte jį skambinti. Taigi, čia yra visa versija, užtikrinanti, kad ji veikia naujausiose naršyklėse:
-webkit-transform-origin: X Y; -moz-transform-origin: X Y; -o-transformacijos kilmė: X Y; -ms-transform-origin: X Y; transformacijos kilmė: X Y;
- Demo „Transformuoti kilmę“
Išvada
Mes pasiekėme visus keturis esminius transformacijos metodus; išversti, masto, pasukti ir pasvirti
Tačiau, kaip minėta, šis modulis vis dar yra ankstyvame etape, todėl, jei šiuos metodus taikysite kitoje svetainėje, įsitikinkite, kad jis nesuderinamas su nesuderinamomis naršyklėmis (aš ne apie IE6 čia).
Galiausiai, galite peržiūrėti visą demonstraciją arba atsisiųsti šaltinį iš šių nuorodų.
- Demo
- Atsisiųsti šaltinį
