Vaata CSS3 2D teisendusi
The Ümberkujundamismoodul CSS3-s on tohutu lisand, see võtab nii, nagu me manipuleerime veebisaidi elemente järgmisele tasandile.
On mõned katsed, mis mind hämmastavad, näiteks sellised näited. Kuid me ei kavatse ehitada ainult CSS-i ikooni, mis võib kuidagi muutuda Autobotiks, sest see võib olla valdav ja mitte päris kasutatav ka reaalses elus.
Selle asemel astume tagasi ja vaatame üle CSS3 2D teisenduste põhitõed, et näha, kuidas see toimib põhitasandil.
Süntaks
CSS3 muundamismoodul võimaldab meil põhimõtteliselt teatud elementi muundada, näiteks tõlkida, skaleerida, pöörata ja viltida.
Ametlik süntaks on transform: meetod (väärtus). Kuid nagu kõik teised CSS3 suured lisandused, mis on veel algstaadiumis, vajavad praegused brauserid transformatsioonide käivitamiseks ikka veel süntaksi versiooni. Seega oleks täielik süntaks selline:
transform: meetod (väärtus); / * W3C ametlik süntaks * / -o-transform: meetod (väärtus); / * Opera 10.5+ * / -ms-transform: meetod (väärtus); / * Internet Explorer 9.0+ * / -moz-transform: meetod (väärtus); / * Firefox 3.6+ * / -webkit-transform: meetod (väärtus); / * Chrome / Safari 3.2+ * /
Samuti on meetod, millele me eespool viidame transform-funktsioonid, mis võiks asendada ühega järgmistest: tõlkida (), skaala (), pöörake () või vilt ().
Väärtus
Enamik meetodi väärtusest vastab X-telg ja Y-telg. Kui mäletate oma Math-klassi kokkuvõtlikku koordinaatide süsteemi keskkoolis, on põhiprintsiip üsna sarnane, X-telg tähistab horisontaalne ja Y-telg tähistab vertikaalne rida.
Välja arvatud rotatsioonid. The pöörlemist kasutab polaarkoordinaadid mis on väljendatud kraadides vahemikus 0 kuni 360.
Kõigi meetodite väärtused võivad olla nii negatiivsed kui ka positiivsed. Pange tähele siiski, et veebileht loetakse järjestikuliselt ülevalt alla, mis muudab veebi Y-telje vastupidiseks algsest lineaarsete koordinaatide põhimõttest. See tähendab, et negatiivse väärtuse lisamisel Y-telg, see liigub selle asemel ülevalt.
Transformatsioonide kasutamine
Nüüd vaatame järgmisi põhilisi meeleavaldusi, et näha transformatsiooni toimingus.
I - Tõlgi
Ära loo mõistega tõlkida, see ei muuda võõrkeelt. The tõlkida Siin on tegelikult meetod elementide liikumiseks mingis suunas.
Meetod sisaldab kahte väärtust; X ja Y. the X väärtus nagu me ülalpool märkisime, võtab see elemendi horisontaalselt; vasakule või paremale, samal ajal kui Y väärtus võtab selle vertikaalselt alt või ülalt.
Nüüd vaatame alljärgnevaid lihtsaid demonstratsioone:
div laius: 100 px; kõrgus: 100 px; transform: translate (100px, 250px);
Ülaltoodud väljavõte liigutab elementi 100tk paremale ja 250tk põhja alt.
div laius: 100 px; kõrgus: 100 px; transform: translate (100px, 0);
Ülaltoodud väljavõte liigutab elementi 100tk jaoks paremale, sest Y-telg nullitakse. Siis, kui me tahame elementi vasakule liigutada, peame X-telje seadma ainult negatiivseks järgmiselt:
div laius: 100 px; kõrgus: 100 px; transform: translate (-100px, 0);
- "Tõlgi" demo
Teise võimalusena on meil võimalik üksikuid meetodeid kasutades elementi liigutada ühes suunas; translateX () ja tõlkida (), erinevus on iga meetodi puhul, mis aktsepteerib ainult ühte väärtust.
Niisiis, praktiliselt öeldes, transform: translate (-100px, 0) on samuti võrdne teisendama: translateX (-100px).
II - skaala
The skaala meetod võimaldab meil suurendamiseks või vähendamiseks elemendid selle tegelikust suurusest. Skaala väärtus on sama kui tõlkida Ülaltoodud meetod sisaldab ka X-d ja Y-d. Ainus erinevus on see, et me ei määra seadet. Siin on näide:
div laius: 100 px; kõrgus: 100 px; transform: skaala (1.5);
Ülaltoodud näide suurendab div 1.5 või 150% selle tegelikust suurusest, ja kuna me võrdleme seda võrdselt nii X kui ka Y suunas, peame seda ainult ühe väärtusega deklareerima. Samuti saate seda sel viisil deklareerida transform: skaala (1,5,1,5); kui sa tahad minna üksikasjalikumalt, teeb see lihtsalt sama.
Lisaks sellele, kui me tahame vähendada elementi, kasutaksime seda väärtust alates 0.999 kuni absoluutarvuni 0, nagu allpool toodud näide, mis vähendab divi suurust 50% või poole võrra:
div laius: 100 px; kõrgus: 100 px; transform: skaala (0,5);
Kuid olge ettevaatlik, kui seate väärtuse absoluutseks “0” the div lihtsalt kaob, nii et kui teil ei ole selleks õiget põhjust, ei sooviksin seda teha.
- "Scale" demo
III - Pööra
Nagu me juba selles postituses mainisime, pöörake meetod kasutab polaarkoordinaate, nii et väärtus on esitatud kraadides. Siin on kaks näidet
Allpool olev väljavõte pöörleb div 30 kraadi päripäeva.
div laius: 100 px; kõrgus: 100 px; transform: pöörake (30deg);
Negatiivne väärtus, nagu on näidatud allpool toodud näites, pöörleb div vastassuunas (vastupäeva) samal määral.
div laius: 100 px; kõrgus: 100 px; transform: rotate (-30deg);
- "Pööra" demo
IV - kaldu
The kaldu meetod võimaldab meil luua mingi paralleelogrammi. See sisaldab ka kahte X ja Y-telje väärtust. Kuid väärtus ise on esitatud kraadides, mitte lineaarsete mõõtmiste asemel, mida me kasutame skaala või tõlkida meetod. Siin on näide:
div laius: 200 px; kõrgus: 100 px; muundamine: vilt (30deg, 10deg);
- "Skew" demo
V - Mitu meetodit
The teisendada vara ei piirdu ainult ühe meetodi käsitlemisega, tegelikult võime üksikutesse deklaratsioonidesse lisada mitmeid meetodeid, näiteks:
div laius: 100 px; kõrgus: 100 px; transform: translateX (100px) pöörleb (45deg);
Ülaltoodud väljavõte liigutab elementi 100px paremale ja samal ajal pöörleb ka 45 kraadi.
"Mitme meetodi" demo.
Teisenda päritolu
The päritolu - nagu nimigi ütleb - kasutatakse transformatsiooni lähtepunkti juhtimiseks. Kui me seda omadust selgesõnaliselt järgmise süntaksiga ei deklareeri transform-päritolu: X Y;, siis võtab brauser vaikeväärtuse, mis on X-le 50% ja Y-le 50%.
Nüüd, kui me täpsustame teisenduse päritolu kuni 0 (X) 0 (Y) algab ülemine vasakpoolne.
Jällegi vajavad kõik brauserid sellele kinnitusele ka eesliite versiooni. Nii et siin on täielik versioon, mis tagab, et see töötab enamikes brauserites:
-webkit-transform-origin: X Y; -moz-transform-origin: X Y; -o-transform-päritolu: X Y; -ms-transform-origin: X Y; transform-päritolu: X Y;
- Demo "Transform-origin"
Järeldus
Oleme jõudnud läbi kõigi nelja olulise ümberkujundamismeetodi; tõlkida, skaalata, pöörata ja viltida
Nagu mainitud, on see moodul siiski alles algusjärgus, nii et kui te rakendate neid meetodeid oma järgmisele veebisaidile, veenduge, et see laguneb sobimatult ühildumatute brauserite jaoks (ma ei viita siin IE6-le).
Lõpuks saate vaadata kõiki demo alla või allika alla laadida järgmistest linkidest.
- Demo
- Allalaadimise allikas
