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

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

• Mis on CSS-i teisendamine?
• Millised on erinevad teisendusomadused?

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:

CSS 3D teisendamise omadused:

Näiteks:

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

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

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.