Muuttaa - CSS-temppuja

Anonim

transformOmaisuus voit visuaalisesti muokata elementin kallistamalla, pyörivä, kääntää, tai skaalaus:

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

Jopa ilmoitetulla korkeudella ja leveydellä tämä elementti skaalataan nyt 20 kertaa alkuperäiseen kokoonsa:

Katso CSS-Tricksin (@ css-tricks) kynänmuutoksen selitys CodePenistä.

Kun annat tälle toiminnolle kaksi arvoa, se venyy vaakasuunnassa ensimmäisellä ja pystysuunnassa toisella. Alla olevassa esimerkissä elementin on nyt kaksinkertainen leveys, mutta puolet alkuperäisen elementin korkeudesta:

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

Tai voit olla tarkempi käyttämättä lyhytfunktiota:

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

Mutta scale()on vain yksi monista käytettävissä olevista muunnostoiminnoista:

Arvot

  • scale(): Vaikuttaa elementin kokoon. Tämä koskee myös font-size, padding, height, ja widthelementin, myös. Se on myös lyhytfunktio toiminnoille scaleXja scaleY.
  • skewX()ja skewY(): Kallistaa elementin vasemmalle tai oikealle, kuten suorakulmion muuttaminen suuntaissuunnaksi. skew()on lyhenne, joka yhdistää skewX()ja skewYhyväksyy molemmat arvot.
  • translate(): Siirtää elementtiä sivuttain tai ylös ja alas.
  • rotate(): Kierrä elementti myötäpäivään nykyisestä sijainnistaan.
  • matrix(): Toiminto, jota ei todennäköisesti ole tarkoitus kirjoittaa käsin, mutta joka yhdistää kaikki muunnokset yhdeksi.
  • perspective(): Ei vaikuta itse elementtiin, mutta vaikuttaa jälkeläisten 3D-muunnoksiin, jolloin kaikilla on yhtenäinen syvyysnäkökulma.

Vinossa

/* 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); )

skewXJa skewYmuunnoksen funktioihin kallistuksen elementti tavalla tai toisella. Muista: elementin vinoutamiseen ei ole lyhytominaisuutta, joten sinun on käytettävä molempia toimintoja. Alla olevassa esimerkissä voimme vääristää 100 x 100 pikselin neliön vasemmalle ja oikealle seuraavasti skewX:

Katso CSS-Tricksin (@ css-tricks) kynänmuutoksen selitys CodePenistä.

Vaikka tässä esimerkissä voimme vääristää elementin pystysuunnassa skewY:

Katso CSS-Tricksin (@ css-tricks) kynänmuutoksen selitys CodePenistä.

Nyt skew()yhdistetään nämä kaksi:

Katso
CSS-Tricks (@ css-tricks) -kynän kallistuksen ()
lyhytominaisuus CodePenistä.

Kiertää

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

Tämä kiertää elementtiä myötäpäivään alkuperäisestä asemastaan, kun taas negatiivinen arvo kiertäisi sitä vastakkaiseen suuntaan. Tässä on yksinkertainen animoitu esimerkki, jossa neliö pyörii edelleen 360 astetta kolmen sekunnin välein:

Katso CSS-Tricksin (@ css-tricks) kynänmuutoksen selitys CodePenistä.

Voimme käyttää myös rotateX, rotateYja rotateZtoimintoja, kuten niin:

Katso CSS-Tricksin (@ css-tricks) kynänmuutoksen selitys CodePenistä.

Kääntää

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

Tämä muunnostoiminto siirtää elementtiä sivuttain tai ylös ja alas. Miksi et käytä vain ylä- / vasenta / alaosaa / oikeaa? No, se on joskus hieman hämmentävää. Ajattelin niitä asetteluna / paikannuksena (heillä on joka tapauksessa parempi selaintuki) ja tämä on tapa siirtää nämä asiat ympäri siirtymää tai animaatiota.

Nämä arvot olisivat mitä tahansa pituusarvoja, kuten 10px tai 2.4em. Yksi arvo siirtää elementin oikealle (negatiiviset arvot vasemmalle). Jos annetaan toinen arvo, tämä toinen arvo siirtää sen alas (negatiiviset arvot ylöspäin). Tai voit saada tarkat tiedot:

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

On tärkeää huomata, että käytettävä elementti transformei saa muita elementtejä virtaamaan sen ympärille. Käyttämällä translatealla olevaa toimintoa ja työntämällä vihreän neliön pois alkuperäisestä sijainnistaan, huomaamme, kuinka ympäröivä teksti pysyy kiinteänä, ikään kuin neliö olisi lohkoelementti:

Katso CSS-Tricksin (@ css-tricks) kynänmuutoksen selitys CodePenistä.

On myös syytä huomata, että translatelaitteistokiihdytetään, jos haluat animoida kyseisen omaisuuden, toisin position: absolute.

Useita arvoja

Välilyönnillä erotetun luettelon avulla voit lisätä transformomaisuuteen useita arvoja :

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

On syytä huomata, että on olemassa järjestys, jossa nämä muunnokset suoritetaan, yllä olevassa esimerkissä "vinous" suoritetaan ensin ja sitten elementti skaalataan.

Matriisi

matrixMuunnosfunktioon voidaan yhdistää kaikki muuttuu yhteen. Se on vähän kuin muunnoskirjoitus, vain en usko, että se todella on tarkoitettu kirjoitettavaksi käsin. Siellä on työkaluja, kuten The Matrix Resolutions, joka voi muuntaa muunnosryhmän yhdeksi matriisijulistukseksi. Ehkä joissakin tilanteissa se voi pienentää tiedostokokoa, vaikka tällaiset tekijöille epäystävälliset mikrooptimoinnit eivät todennäköisesti ole vaivan arvoista.

Uteliaille tämä:

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

voidaan edustaa myös:

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

3D-muunnokset

Suurimmalla osalla yllä olevista ominaisuuksista on niistä 3D-versiot.

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

Kolmas arvo translate3dtai arvo translateZsiirtää elementin kohti katsojaa, negatiiviset arvot poispäin.

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

Kolmas arvo scale3dtai arvo scaleZvaikuttaa skaalautumiseen z-akselilla (esim. Kuvitteellinen viiva tulee suoraan näytöltä).

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

rotateXja rotateYkiertää 3D-avaruudessa elementtiä näiden akseleiden ympärillä. rotate3dvoit määrittää 3D-avaruudessa pisteen, jossa elementtiä kierretään.

matrix3d(… )

Tapa kuvata 3D-muunnos ohjelmallisesti 4 × 4-ruudukossa. Kukaan ei koskaan kirjoita yhtä näistä koskaan.

perspective(value)

Tämä arvo ei vaikuta itse elementtiin, mutta se vaikuttaa jälkeläisten 3D-muunnoksiin, jolloin kaikilla on yhtenäinen syvyysnäkökulma.

Lisää tietoa

  • MDN-dokumentit muunnoksesta ja käytöstä.
  • David DeSandron dokumentaatio 3D-muunnoksista
  • Surfin 'Safari: 3D-muunnokset
  • W3C-tiedot CSS3-muunnoksista
  • CSS 3D -muunnosten esittely

Selaimen tuki

2D-muunnokset

Kromi Safari Firefox Ooppera IE Android iOS
Minkä tahansa 3.1+ 3,5+ 10,5+ 9+ 4.1+ Ainakin 4

3D-muunnokset

Kromi Safari Firefox Ooppera IE Android iOS
10+ 4+ 12+ ei mitään 10+ 4.1+ 5+

Toimittajan etuliitteet

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