Muundama - CSS-trikid

Anonim

transformVara võimaldab teil visuaalselt manipuleerida element kallutamise, pöörlev, tõlkimine või tagi:

.element ( width: 20px; height: 20px; transform: scale(20); )

Isegi deklareeritud kõrguse ja laiuse korral suurendatakse seda elementi algse suuruse kahekümnekordseks:

Vaadake CodePenil CSS-Tricksi (@ css-tricks) selgitust pliiatsi teisendamise kohta.

Sellele funktsioonile kahe väärtuse andmine venitab seda horisontaalselt esimese võrra ja vertikaalselt teist. Allpool toodud näites on element nüüd algse elemendi kaks korda laiem, kuid pool kõrgust:

.element ( transform: scale(2, .5); )

Või võite olla täpsem ilma kiirfunktsiooni kasutamata:

transform: scaleX(2); transform: scaleY(.5);

Kuid scale()on vaid üks paljudest saadaolevatest teisendusfunktsioonidest:

Väärtused

  • scale(): Mõjutab elemendi suurust. See kehtib ka font-size, padding, height, ja widthelemendi, liiga. See on ka funktsioonide scaleXja scaleYfunktsioonide lühifunktsioon .
  • skewX()ja skewY(): kallutab elementi vasakule või paremale, nagu ristküliku muutmine rööpkülikuks. skew()on stenogramm, mis ühendab skewX()ja skewYaktsepteerib mõlemat väärtust.
  • translate(): Liigutab elementi külili või üles ja alla.
  • rotate(): Pöörab elementi praegusest asendist päripäeva.
  • matrix(): Funktsioon, mis pole ilmselt mõeldud käsitsi kirjutamiseks, kuid ühendab kõik teisendused üheks.
  • perspective(): Ei mõjuta elementi ennast, kuid mõjutab järeltulevate elementide 3D-teisendusi, võimaldades neil kõigil olla ühtlane sügavusperspektiiv.

Viltune

/* Skew points along the x-axis */ .element ( transform: skewX(25deg); ) /* Skew point along the y-axis */ .element ( transform: skewY(25deg); ) /* Skew points along the x- and y-axis */ .element ( transform: skew(25deg, 25deg); )

Funktsioon skewXja skewYteisenda kallutavad elementi üht- või teistpidi. Pidage meeles: elemendi kallutamiseks pole lühikirjeldust, seega peate kasutama mõlemat funktsiooni. Allpool toodud näites saame 100 x 100 pikslit ruudu vasakule ja paremale kallutada järgmiselt skewX:

Vaadake CodePenil CSS-Tricksi (@ css-tricks) selgitust pliiatsi teisendamise kohta.

Kuigi selles näites võime elementi vertikaalselt kallutada skewY:

Vaadake CodePenil CSS-Tricksi (@ css-tricks) selgitust pliiatsi teisendamise kohta.

Nüüd skew()kombineerime need kaks:

Vaadake CodeSenil
CSS-
Tricksi (@ css-tricks) atribuuti Pen skew ().

Pööra

.element ( transform: rotate(25deg); )

See pöörab elementi algsest asendist päripäeva, samas kui negatiivne väärtus pööraks seda vastassuunas. Siin on lihtne animeeritud näide, kus ruut jätkab iga kolme sekundi tagant 360 kraadi pööramist:

Vaadake CodePenil CSS-Tricksi (@ css-tricks) selgitust pliiatsi teisendamise kohta.

Saame kasutada ka rotateX, rotateYja rotateZfunktsioonid, nii:

Vaadake CodePenil CSS-Tricksi (@ css-tricks) selgitust pliiatsi teisendamise kohta.

Tõlgi

.element ( transform: translate(20px, 10px); )

See teisendusfunktsioon liigutab elementi külili või üles ja alla. Miks mitte kasutada ainult ülemist / vasakut / alumist / paremat osa? Noh, see on kohati natuke segane. Ma mõtleksin neile kui paigutusele / positsioneerimisele (neil on niikuinii parem brauseritugi) ja see on viis, kuidas neid asju ülemineku või animatsiooni osana ringi liikuda.

Need väärtused oleksid mis tahes pikkuse väärtused, näiteks 10px või 2.4em. Üks väärtus liigutab elemendi paremale (negatiivsed väärtused vasakule). Kui antakse teine ​​väärtus, siis see teine ​​väärtus viib selle alla (negatiivsed väärtused üles). Või saate täpsustada:

transform: translateX(value); transform: translateY(value);

Oluline on märkida, et kasutatav element transformei põhjusta selle ümber teiste elementide voolamist. Kasutades translateallolevat funktsiooni ja nihutades rohelise ruudu algsest kohast välja, märkame, kuidas ümbritsev tekst jääb paigale, nagu oleks ruut ploki element:

Vaadake CodePenil CSS-Tricksi (@ css-tricks) selgitust pliiatsi teisendamise kohta.

Samuti väärib märkimist, et translateriistvara kiirendatakse, kui soovite seda vara erinevalt animeerida position: absolute.

Mitu väärtust

Tühikuga eraldatud loendi abil saate transformatribuudile lisada mitu väärtust :

.element ( width: 20px; height: 20px; transform: scale(20) skew(-20deg); )

Väärib märkimist, et nende teisenduste teostamise järjekord on olemas, ülaltoodud näites tehakse kõigepealt `viltu` ja seejärel elementi skaleeritakse.

Maatriks

matrixMuuta funktsiooni saab kasutada, et koondada muundub üks. See on natuke nagu muundamise stenogramm, ainult et ma ei usu, et see tegelikult on mõeldud käsitsi kirjutamiseks. Seal on tööriistu nagu The Matrix Resolutsioonid, mis võivad teisendada rühmade teisenditest üheks maatriksdeklaratsiooniks. Võib-olla võib see mõnes olukorras faili suurust vähendada, kuigi sellised autorisõbralikud mikrooptimeerimised pole tõenäoliselt teie aega väärt.

Uudishimulike jaoks:

rotate(45deg) translate(24px, 25px)

võib esindada ka järgmiselt:

matrix(0.7071067811865475, 0.7071067811865476, -0.7071067811865476, 0.7071067811865475, -0.7071067811865497, 34.648232278140824)

3D-teisendused

Enamikul ülaltoodud omadustest on nende 3D-versioonid.

translate3d(x, y, z) translateZ(z)

Kolmas väärtus translate3dvõi väärtus translateZliigutab elemendi vaataja suunas, negatiivsed aga eemale.

scale3d(sx, sy, sz) scaleZ(sz)

Kolmas väärtus scale3dvõi väärtus scaleZmõjutab skaalat piki z-telge (nt otse ekraanilt välja tulev kujuteldav joon).

rotateX(value) rotateY(value) rotate3d(x, y, z)

rotateXja rotateYpöörab elementi 3D-ruumis nende telgede ümber. rotate3dvõimaldab teil määrata 3D-ruumis punkti, kus elementi ümber pöörata.

matrix3d(… )

3D-teisenduse programmilise kirjeldamise viis 4 × 4 ruudustikus. Selliseid ei kirjuta keegi kunagi käsitsi.

perspective(value)

See väärtus ei mõjuta elementi ennast, kuid mõjutab järeltulevate elementide 3D-teisendusi, võimaldades neil kõigil olla ühtne sügavusperspektiiv.

Rohkem informatsiooni

  • MDN-i dokumendid teisendamise ja kasutamise kohta.
  • David DeSandro dokumentatsioon 3D-teisenduste kohta
  • Surfin 'Safari: 3D-teisendused
  • W3C spetsifikatsioon CSS3 teisendustel
  • CSS-i 3D-teisenduste tutvustus

Brauseri tugi

2D teisendab

Chrome Safari Firefox Ooper IE Android iOS
Ükskõik 3.1+ 3,5+ 10,5+ 9+ 4.1+ Vähemalt 4

3D-teisendused

Chrome Safari Firefox Ooper IE Android iOS
10+ 4+ 12+ mitte ühtegi 10+ 4.1+ 5+

Müüja eesliited

.element ( -webkit-transform: value; -moz-transform: value; -ms-transform: value; -o-transform: value; transform: value; )