Izskatīt CSS3 2D transformācijas
The Transformācijas modulis CSS3 ir milzīgs papildinājums, tas aizņem veidu, kā mēs manipulējam ar tīmekļa vietnes elementiem uz nākamo līmeni.
Man ir daži eksperimenti, kas mani pārsteidz, piemēram, šis piemērs. Tomēr mēs neplānosim izveidot kaut ko līdzīgu tikai CSS ikonai, kas var kaut kādā veidā pārvērsties par Autobotu, jo tā var būt milzīga un ne visai lietojama reālajā dzīvē..
Tā vietā šoreiz mēs atgriezīsimies un pārskatīsim CSS3 2D transformāciju pamatus, lai redzētu, kā tas darbojas fundamentālā līmenī.
Sintakse
CSS3 transformācijas modulis būtībā ļauj mums pārveidot elementu zināmā mērā, piemēram, tulkošanu, mērogošanu, rotēšanu un sagrozīšanu.
Oficiālā sintakse ir transform: metode (vērtība). Tomēr, tāpat kā jebkurš cits CSS3 lielisks papildinājums, kas joprojām ir agrīnā stadijā, pašreizējām pārlūkprogrammām joprojām ir nepieciešama sintakses versija, lai palaistu transformācijas. Tātad pilnīga sintakse izrādīsies šādi:
transform: metode (vērtība); / * W3C oficiālā sintakse * / -o-transformācija: metode (vērtība); / * Opera 10.5+ * / -ms-transform: metode (vērtība); / * Internet Explorer 9.0+ * / -moz-transform: metode (vērtība); / * Firefox 3.6+ * / -webkit-transform: metode (vērtība); / * Chrome / Safari 3.2+ * /
Arī metode, uz kuru mēs atsaucamies iepriekš, ir transformācijas funkcijas, kuru var aizstāt ar kādu no šiem: tulkot (), skala (), pagriezt () vai šķībs ().
Vērtība
Lielākā daļa metodes vērtības atbilst X ass un Y ass. Ja atceraties Dekarta koordinātu sistēmu no savas Math klases vidusskolā, pamatprincips ir diezgan līdzīgs, X-ass ir horizontāli līnija un Y ass ir vertikāli līnija.
Izņemot rotācijas. The rotācija izmantos polārās koordinātas kas izteikts grādos, kas svārstās no 0 līdz 360.
Visu metožu vērtības var būt gan negatīvas, gan pozitīvas. Vienkārši ņemiet piezīmi, jo tīmekļa lapa tiek nolasīta secīgi no augšas uz leju, kas padara Y-asi tīmeklī pretēju pret sākotnējā principa, kas attiecas uz Dekarta koordinātām. Tas nozīmē, ka, pievienojot negatīvu vērtību Y ass, tā vietā tā pārvietosies uz augšu.
Transformāciju izmantošana
Tagad aplūkosim šādu pamat demonstrāciju, lai redzētu Transformāciju darbībā.
ES tūlkoju
Neaizmirstiet ar šo terminu tulkot, tā neiztulkos svešvalodu. The tulkot šeit faktiski ir metode elementu pārvietošanai kādā virzienā.
Metode satur divas vērtības; X un Y. the X vērtība kā mēs iepriekš norādījām, elements būs horizontāli; pa kreisi vai pa labi, kamēr Y vērtība būs vertikāli apakšā vai augšpusē.
Tagad aplūkosim dažas vienkāršas demonstrācijas:
div platums: 100px; augstums: 100px; pārveidot: tulkot (100px, 250px);
Iepriekš minētais fragments pārvietos elementu uz 100px pa labi un 250px uz leju.
div platums: 100px; augstums: 100px; pārveidot: tulkot (100px, 0);
Iepriekš minētais fragments pārvietos elementu pa labi pa 100px, jo mēs noliekam Y ass. Tad, ja mēs vēlamies pārvietot elementu pa kreisi, tad X ass jāiestata tikai negatīvā secībā:
div platums: 100px; augstums: 100px; pārveidot: tulkot (-100px, 0);
- "Tulkot" demo
Alternatīvi, mēs varam pārvietot elementu vienā virzienā ar šīm individuālajām metodēm; translateX () un tulkot (), atšķirība ir katra no šīm metodēm, pieņem tikai vienu vērtību.
Tātad, praktiski runājot, pārveidot: tulkot (-100px, 0) ir vienāds ar pārveidot: translateX (-100px).
II - mērogs
The mērogā metode ļauj mums palielināt vai samazināt elementus no tā faktiskā lieluma. Skalas vērtība ir tāda pati kā tulkot iepriekš aprakstītā metode satur arī X un Y. Vienīgā atšķirība ir tā, ka mēs nenorādām vienību. Šeit ir piemērs:
div platums: 100px; augstums: 100px; transformācija: skala (1.5);
Iepriekš minētais piemērs palielinās div 1.5 vai 150% no tā faktiskā lieluma, un tā kā mēs to vienādi attiecinām gan uz X, gan Y virzieniem, mums tas tikai jāpaziņo vienā vērtībā. Jūs varat arī to paziņot šādā veidā transformācija: skala (1,5,1,5); ja vēlaties iet sīkāk, tas vienkārši darīs to pašu.
Turklāt, ja mēs vēlamies samazināt elementu, mēs īpaši izmantotu vērtību no 0,999 līdz absolūtam 0, piemēram, zemāk redzamajā piemērā, kas samazinās div 50% vai pusi.
div platums: 100px; augstums: 100px; transformācija: skala (0,5);
Tomēr, esiet piesardzīgi, ja iestatāt vērtību absolūtai “0” the div tikko pazudīs, tāpēc, ja jums nebūs pamatota iemesla to darīt, es neiesakām to darīt.
- Demonstrācija "Mērogs"
III - Pagriezt
Kā mēs minējām iepriekš šajā amatā, pagriezt metode izmanto polārās koordinātas, tāpēc vērtība ir norādīta grādos. Šeit ir divi piemēri
Turpmāk sniegtais fragments rotēs div 30 grādi pulksteņrādītāja virzienā.
div platums: 100px; augstums: 100px; transformēt: pagriezt (30deg);
Negatīva vērtība, kā parādīts zemāk redzamajā piemērā, mainīsies div pretējā virzienā (pretēji pulksteņrādītāja virzienam) tādā pašā pakāpē.
div platums: 100px; augstums: 100px; transformēt: pagriezt (-30deg);
- Demonstrācija "Pagriezt"
IV - Skew
The šķībs metode ļauj mums izveidot sava veida paralelogramu. Tajā ir arī divas X un Y ass vērtības. Tomēr pati vērtība ir norādīta pakāpē, nevis lineārajos mērījumos, kā mēs izmantojam mērogā vai tulkot metodi. Šeit ir piemērs:
div platums: 200px; augstums: 100px; pārveidot: šķībs (30deg, 10deg);
- "Skew" demo
V - daudzkārtēja metode
The pārveidot īpašums neaprobežojas tikai ar vienu metodi, patiesībā mēs varam iekļaut vairākas metodes atsevišķās deklarācijās, piemēram:
div platums: 100px; augstums: 100px; pārveidot: translateX (100px) rotē (45deg);
Iepriekš minētais fragments pārvietos elementu 100px pa labi un tajā pašā laikā arī rotē 45 grādus.
Demo "Multiple Method".
Pārveidot izcelsmi
The trans-izcelsmes - tā nosaukums norāda - tiek izmantots, lai kontrolētu transformācijas sākumpunktu. Ja mēs šo īpašību nepārprotami deklarējam ar šādu sintaksi transformācijas izcelsme: X Y;, tad pārlūkprogrammā būs noklusējuma vērtība, kas ir 50% X un 50% Y.
Tagad, ja mēs norādīsim pārveidot līdz 0 (X) 0 (Y) transformācija sāksies augšējā kreisajā pusē.
Atkal, visām pārlūkprogrammām joprojām ir nepieciešama prefiksu versija, lai izsauktu šo īpašumu. Tātad, šeit ir pilnā versija, lai nodrošinātu, ka tā darbojas jaunākajās pārlūkprogrammās:
-webkit-transform-origin: X Y; -moz-transform-origin: X Y; -o-transformācijas izcelsme: X Y; -ms-transform-origin: X Y; transformācijas izcelsme: X Y;
- Demo "Transform-origin"
Secinājums
Mēs esam sasnieguši visas četras būtiskās transformācijas metodes; iztulkot, mērogot, pagriezt un šķībēt
Tomēr, kā jau minēts, šis modulis joprojām ir agrīnā stadijā, tādēļ, ja jūs šīs metodes piemērosiet savā nākamajā tīmekļa vietnē, pārliecinieties, ka tas pasliktinās ar nesaderīgām pārlūkprogrammām (es nerunāju par IE6 šeit).
Visbeidzot, varat skatīt visu demonstrāciju vai lejupielādēt avotu no šādām saitēm.
- Demo
- Lejupielādēt avotu
