Kuidas teisendust CSS-is kõige paremini ära kasutada?

Selles artiklis mõistame üksikasjalikult, mis on Transform CSS-is, ja järgime seda üksikasjaliku praktilise tutvustusega.

Selles artiklis mõistame Transform In üksikasjalikult ja järgige seda üksikasjaliku praktilise tutvustusega. Järgmisi näpunäiteid käsitletakse selles artiklis,



Veebisaidi funktsioonide edenemisega on sama oluline pakkuda oma veebisaidil nutikaid integreerimisi, et muuta see atraktiivseks ja paremaks. Tunni vajadus on lisada mitmesuguseid CSS-i elemente, mis teie saidile komplimente teevad.
Inimesed jäävad eemale veebisaitidest, mis tegelikult ei meeldi massidele. Niisiis, kuidas proovida mõnda elementi teisendada ja oma CSS-i kaunistada väiksema tihendusväärtusega.
Sarnaste vajaduste täitmiseks on meil CSS-i omadus, mis muudab elemendid kas nende kallutamise, pööramise, skaleerimise või tõlkimise teel.



Selle artikliga Transform CSS-is edasi liikumine

Mis on CSS-i teisendamine?

CSS-elemendi teisendamine tähendab selle serva pakkumist kas 2D- või 3D-vormis. See muudab visuaalselt elemendi stiili.
2D-teisendus töötab X- ja Y-teljel. Muudatuste tegemiseks võite mõlemal teljel pakkuda mis tahes serva või struktuuri. 3D-teisenduse jaoks peab see töötama nii X-, Y- kui ka Z-teljel, et tagada vajalik sügavus.



CSS 2D teisenduse omadused:

Funktsioon Kirjeldus

maatriks ( n, n, n, n, n, n )

Kuue väärtuse maatriks



tõlkima ( x, y )

Võimaldab elemendil liikuda mööda X- ja Y-telge

translateX ( n )

Võimaldab elemendil liikuda mööda X-telge

tõlkimaY ( n )

Võimaldab elemendil liikuda mööda Y-telge

kaal( x, y )

Muudab elementide laiust ja kõrgust

skaalaX ( n )

Muudab elemendi laiust

skaalaY ( n )

Muudab elementide kõrgust

pöörata ( nurk )

Võimaldab elementi pöörata parameetris määratud nurga all

viltu ( x-nurk, y-nurk )

Väänab elementi mööda X- ja Y-telge

viltuneX ( nurk )

Väänab elementi mööda X-telge

viltu ( nurk )

Väänab elementi mööda Y-telge

CSS 3D teisendamise omadused:

Kinnisvara

Kirjeldus

ümberkujundama

Rakendab elemendile 2D- või 3D-teisendust

muunduma-päritolu

Võimaldab muuta transformeeritud elementide asukohta

muundamisstiil

c ++ massiivi sorteerimine

Määrab, kuidas sisestatud elemendid 3D-ruumis renderdatakse

perspektiivist

Määrab 3D-elementide vaatamise perspektiivi

perspektiiv-päritolu

Määrab 3D-elementide alumise positsiooni

tagapinna nähtavus

Määrab, kas mõni element peaks olema nähtav ekraanile vaatamata

Näiteks:

css .element {laius: 20px kõrgus: 20px teisendus: skaala (20)}

Nüüd, kui seda teete, suurendatakse määratletud elementi 20 korda.

Näide- muundage CSS- Edureka

Lisaks sellele saate horisontaalseks ja vertikaalseks skaleerimiseks ka telge tarkalt skaleerida.

teisendus: skaalaX (2) teisendus: skaalaY (.5)

Kõigi brauserite korraliku teisenduse pakkumiseks võite teha järgmist.

div {-webkit-transform: skaala (1.5) -moz-transform: skaala (1.5) -o-transform: skaala (1.5) teisendus: skaala (1.5)}

CSS-i teisendamise omadus parandab CSS-i visuaalse vormindamise taseme koordinaatide ruumi.
Mis on visuaalse vormindamise tase?
Visuaalse vormindamise tase tähendab dokumendi töötlemist ja visuaalset esitamist meediumiplatvormidel. Visuaalse vormindamise abil saate muuta iga elemendi mudeliks, mis ühtib CSS-i kastimudeliga. CSS-i kasti mudel määratleb elemendi ristkülikukujulises kasti vormingus, määrates suuruse, asukoha ja omadused.
Märge: Teisendada saab ainult teisendatavaid elemente.

Selle artikliga Transform CSS-is edasi liikumine

Millised on erinevad teisendusomadused?

Vaatame kõiki teisendavaid omadusi:

1. skaala (): Skaalamine tähendab elemendi suuruse muutmist horisontaalselt või vertikaalselt.

Vertikaalse skaleerimise korral:skaalaX

Horisontaalse skaleerimise jaoks:skaalaY

Elemendi puhul saate muuta ka fondi suurust, polsterdust, kõrgust või laiust. Vaikeväärtus on 1, mis tähendab ka väärtuse 0,5 pakkumist, kui väärtus poolitab seda, samas kui väärtus 2 kahekordistab skaala.

2. viltu (): Kaldus omadus võimaldab kasutajal elementi ühest koordinaadipunktist paremale või vasakule kallutada. See on peaaegu nagu ristküliku muutmine rööpkülikuks. Elementi saate selle koordinaatide järgi kallutada.

Näide:

.element {transform: skewX (25deg)} .element {transform: viltuneY (25deg)

Kui te seda teete, kallutab element horisontaalselt ja vertikaalselt 25 kraadi, kasutades skewX või skewY.

3. pöörata ( ) : Selle omaduse abil saate elementi päripäeva pöörata. Algsesse kohta tagasi toomiseks saate seda pöörata 180 kraadi või 360 kraadi.

.element {muundamine: pööramine (25deg)}

Ka pööramise võimaldamiseks võite kasutada mis tahes kolme mõõdet: rotateX, rotateY või rotateZ.

4. tõlkima ( ) : Elementi saab korralikult tagurpidi või külili liigutada.

.element {transform: tõlkima (20px, 10px)}

Tõlkega liigutatakse määratud objekt / element tagurpidi või külili. Esimene määratud väärtus liigutab objekti parempoolsesse palatisse (negatiivne liigutab selle vasakule küljele) ja teine ​​väärtus liigutab seda alla (negatiivse väärtuse määramine liigutab seda ülespoole).

Kui see võib teid segadusse ajada, rakendage elemendi horisontaalselt horisontaalselt X-telge ja vertikaalselt positsiooni muutmiseks Y-telge. Teisendusomandi kõige hämmastavam aspekt on see, et teisenduse rakendamine võimaldab elemendil liikuda, hoides kõiki muid elemente või teksti puutumatuna. Vahemaa võetakse tavaliselt pikslites või protsentides.

Näiteks:

.element {transform: translateX (väärtus) transform: tõlkimaY (väärtus)}

5. perspektiiv (): saate anda elemendi perspektiivis sügavuse. See võimaldab anda elemendile 3D-teisenduse, muutes selle teisenduses kuupiliseks.
tõlkida3d (x, y, z)
tõlkima Z (z)

tõlkima3d (x, y, z) tõlkimaZ (z)

Z-telje kasutuselevõtt annab elemendile 3D-visualiseerimise. translateZ () viib elemendi vaataja poole, negatiivne aga eemale.

6. maatriks () : Ühendage kõik teisendused üheks.

pöörata (45deg) tõlkima (24px, 25px)

Maatriksi () rakendamine ühendab kõik teisendusomadused ühes massiivis.

Transformeerimisomaduste rakendamine võib teie elementi oluliselt täiustada ja seega teie veebisaiti atraktiivseks muuta. Proovige neid!

See viib meid selle artikli lõppu, mis käsitleb teisenemist CSS-is.

Kui soovite veebiarenduse kohta lisateavet saada, vaadake järgmist autor Edureka. Veebiarenduse sertifitseerimiskoolitus aitab teil õppida, kuidas luua muljetavaldavaid veebisaite HTML5, CSS3, Twitter Bootstrap 3, jQuery ja Google API-de abil ning juurutada see Amazon Simple Storage Service'i (S3).

Kui olete endiselt huvitatud, kui teil on küsimusi, võite selle postitada selle blogi “Mis on CSS” kommentaaride jaotisesse ja võtame teiega esimesel võimalusel ühendust.