Katso CSS3 n 2D-muunnokset
Muunnosmoduuli on valtava lisä CSS3: ssa, se vie tapaa käsitellä verkkosivuston elementtejä seuraavalle tasolle.
On joitakin kokeita, jotka todella hämmästyttävät minua, esimerkkejä tästä. Emme kuitenkaan aio rakentaa sellaista kuin vain CSS-kuvaketta, joka voi jotenkin muuttua Autobotiksi, koska se voi olla ylivoimainen ja melko käyttökelpoinen myös todellisessa elämässä.
Sen sijaan tulemme tällä kertaa taaksepäin ja tarkistamme CSS3-2D-muunnosten perusteet nähdäksesi, miten se toimii perustasolla.
Syntaksi
CSS3-muunnosmoduuli pohjimmiltaan antaa meille mahdollisuuden muuntaa elementti jossain määrin, kuten kääntäminen, skaalaus, pyörittäminen ja vinoutuminen.
Virallinen syntaksi on muunnos: menetelmä (arvo). Kuten kaikki muutkin CSS3: n suuret lisäykset, jotka ovat vielä alkuvaiheessa, nykyiset selaimet tarvitsevat edelleen syntaksiversiota muunnosten suorittamiseksi. Koko syntaksi osoittautuu näin:
muunnos: menetelmä (arvo); / * W3C virallinen syntaksi * / -o-muunnos: menetelmä (arvo); / * Opera 10.5+ * / -ms-transform: menetelmä (arvo); / * Internet Explorer 9.0+ * / -moz-transform: menetelmä (arvo); / * Firefox 3.6+ * / -webkit-transform: menetelmä (arvo); / * Chrome / Safari 3.2+ * /
Myös edellä mainittua menetelmää käytetään muunnos-toiminnot, joka voidaan korvata jollakin seuraavista: Kääntää(), asteikko (), kiertää() tai vinossa().
Arvo
Suurin osa menetelmän arvosta vastaa X-akseli ja Y-akseli. Jos muistat Cartesian koordinaattijärjestelmän Math-luokastasi lukiossa, perusperiaate on aivan samanlainen, X-akseli edustaa vaakasuora ja Y-akseli edustavat pystysuora linja.
Lukuun ottamatta kiertoja. kierto käyttää polaarikoordinaatit joka ilmaistaan asteina, jotka vaihtelevat välillä 0 - 360.
Kaikkien menetelmien arvot voivat olla sekä negatiivisia että positiivisia. Huomioi kuitenkin vain, koska verkkosivu luetaan peräkkäin ylhäältä alas, mikä tekee Y-akselista Webissä päinvastaisen kuin alkuperäisen peruskorjauksen periaatteen. Tämä tarkoittaa, että kun lisäät negatiivisen arvon Y-akseli, se siirtyy sen sijaan yläreunaan.
Muunnosten käyttö
Tarkastellaan nyt seuraavaa perustutkimusta, jolla näet Transformation toiminnassa.
Minä käännän
Älä pilvistä termiä Kääntää, se ei käännä vieraita kieliä. Kääntää Tässä on itse asiassa menetelmä elementtien liikuttamiseksi jollakin tavalla.
Menetelmä sisältää kaksi arvoa; X ja Y. X-arvo kuten edellä huomautimme, vie elementti vaakasuoraan; vasemmalle tai oikealle, samalla kun Y arvo vie sen pystysuunnassa pohjaan tai yläosaan.
Katsotaan nyt seuraavia yksinkertaisia esittelyjä:
div leveys: 100px; korkeus: 100px; muunnos: kääntää (100px, 250px);
Yllä oleva katkaisu siirtää elementin 100px oikealle ja 250 pikseliä alhaalle.
div leveys: 100px; korkeus: 100px; muunnos: kääntää (100px, 0);
Yllä oleva katkaisu siirtää elementin oikealle 100px: lle, koska nollaamme Y-akselin. Jos sitten haluamme siirtää elementin vasemmalle, sinun on vain asetettava X-akseli negatiiviseksi seuraavasti:
div leveys: 100px; korkeus: 100px; muunnos: kääntää (-100px, 0);
- "Käännä" demo
Vaihtoehtoisesti voimme siirtää elementtiä yhdessä suunnassa näiden yksittäisten menetelmien avulla; translateX () ja translateY (), ero on, että kukin näistä menetelmistä hyväksyy vain yhden arvon.
Joten käytännöllisesti katsoen muuntaa: kääntää (-100px, 0) on myös yhtä suuri muunnos: translateX (-100px).
II - Skaalaus
asteikko menetelmä antaa meille mahdollisuuden suurentaa tai pienentää elementtejä sen todellisesta koosta. Mittakaavan arvo on sama kuin Kääntää Yllä oleva menetelmä sisältää myös X: n ja Y: n. Ainoa ero on, että emme määritä yksikköä. Tässä on esimerkki:
div leveys: 100px; korkeus: 100px; muunnos: asteikko (1.5);
Yllä oleva esimerkki suurentaa div 1,5 tai 150% sen todellisen koon, ja koska se skaalataan tasaisesti sekä X- että Y-suuntaan, meidän on vain ilmoitettava se yhdellä arvolla. Voit myös ilmoittaa sen tällä tavalla muunnos: asteikko (1,5,1,5); jos haluat mennä yksityiskohtaisemmin, se vain tekee saman.
Lisäksi, jos haluamme vähentää elementtiä, käytämme nimenomaan arvoa 0,999 - absoluuttinen 0, kuten alla oleva esimerkki, joka pienentää divin kokoa 50% tai puoleen:
div leveys: 100px; korkeus: 100px; muunnos: asteikko (0,5);
Ole kuitenkin varovainen, jos asetat arvon absoluuttiseksi “0” div vain katoaa, joten jos sinulla ei ole perusteltua syytä tehdä niin, en suosittele sitä.
- "Scale" demo
III - Kierrä
Kuten mainitsimme aiemmin tässä viestissä, kiertää menetelmä käyttää polaarikoordinaatteja, joten arvo ilmoitetaan asteina. Tässä on kaksi esimerkkiä
Alla oleva pätkä pyörii div 30 astetta myötäpäivään.
div leveys: 100px; korkeus: 100px; muunnos: kiertää (30deg);
Negatiivinen arvo, kuten alla olevassa esimerkissä on esitetty, pyörii div vastakkaiseen suuntaan (vastapäivään) samalla tasolla.
div leveys: 100px; korkeus: 100px; muunnos: kiertää (-30deg);
- "Kierrä" demo
IV - Vino
vinossa Menetelmän avulla voimme luoda jonkinlaisen rinnak- Se sisältää myös kaksi X- ja Y-akselin arvoa. Itse arvo ilmoitetaan kuitenkin asteittain, eikä lineaaristen mittausten sijaan, joita käytämme asteikko tai Kääntää menetelmä. Tässä on esimerkki:
div leveys: 200px; korkeus: 100px; muunnos: vinossa (30deg, 10deg);
- "Skew" demo
V - Multiple-menetelmä
muuttaa omaisuutta ei ole rajoitettu käsittelemään vain yhtä menetelmää, itse asiassa voimme sisällyttää useita menetelmiä yksittäisiin ilmoituksiin:
div leveys: 100px; korkeus: 100px; muunnos: translateX (100px) pyörii (45deg);
Yllä oleva katkaisu siirtää elementin 100px oikealle ja samalla myös kiertää 45 astetta.
"Useiden menetelmien" demo.
Muuta alkuperää
transfrom-alkuperää - kuten sen nimi viittaa - käytetään transformaation lähtökohdan ohjaamiseen. Jos emme nimenomaisesti julista tätä ominaisuutta seuraavalla syntaksilla muunnos-alkuperä: XY;, sitten selain ottaa oletusarvon, joka on 50% X: lle ja 50% Y: lle.
Jos nyt määritetään muunnos-alkuperää 0 (X) 0 (Y), muunnos alkaa ylhäältä vasemmalta.
Jälleen kaikki selaimet tarvitsevat edelleen etuliitteen version, jotta tämä ominaisuus kutsutaan. Tässä on siis täydellinen versio sen varmistamiseksi, että se toimii useimmissa uusissa selaimissa:
-webkit-transform-origin: X Y; -moz-transform-origin: X Y; -o-transform-alkuperä: X Y; -ms-transform-origin: X Y; muunnos-alkuperä: XY;
- "Transform-origin" -demo
johtopäätös
Olemme tulleet läpi kaikki neljä olennaista muuntamismenetelmää; kääntää, skaalata, kiertää ja vinoutua
Kuten mainittiin, tämä moduuli on kuitenkin vielä alkuvaiheessa, joten jos käytät näitä menetelmiä seuraavaan verkkosivustoon, varmista, että se hajoaa sulavasti yhteensopimattomille selaimille (en viittaa tähän IE6: een).
Lopuksi voit tarkastella kaikkia demoja tai ladata lähteen seuraavista linkeistä.
- esittely
- Lataa lähde
