Pretvoriti - CSS-trikovi

Anonim

transformSvojstvo omogućuje vizualno manipulirati element po iskrivljavanje, rotirajući, prevodeći ili skaliranje:

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

Čak i uz deklariranu visinu i širinu, ovaj će element sada biti uvećan na dvadeset puta veću od svoje izvorne veličine:

Pogledajte objašnjenje o Transformaciji olovke od strane CSS-Tricks (@ css-tricks) na CodePenu.

Davanjem ove funkcije dvije vrijednosti razvući će je vodoravno za prvu, a okomito za drugu. U primjeru ispod element će sada imati dvostruku širinu, ali polovinu visine izvornog elementa:

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

Ili možete biti precizniji bez upotrebe stenografske funkcije:

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

No scale(), samo je jedna od mnogih dostupnih funkcija transformacije:

Vrijednosti

  • scale(): Utječe na veličinu elementa. To se odnosi i na font-size, padding, heighti widthelementa, previše. To je također skraćenica za funkcije scaleXi scaleY.
  • skewX()i skewY(): Naginje element ulijevo ili udesno, poput pretvaranja pravokutnika u paralelogram. skew()je stenografija koja kombinira skewX()i skewYprihvaćajući obje vrijednosti.
  • translate(): Pomiče element bočno ili gore-dolje.
  • rotate(): Rotira element u smjeru kazaljke na satu iz trenutnog položaja.
  • matrix(): Funkcija koja vjerojatno nije namijenjena ručnom pisanju, ali kombinira sve pretvorbe u jednu.
  • perspective(): Ne utječe na sam element, ali utječe na transformacije 3D transformacija potomstvenih elemenata, omogućujući im svima da imaju konzistentnu dubinsku perspektivu.

Koso

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

skewXI skewYtransformirati funkcije nagiba elementa jedan ili drugi način. Zapamtite: ne postoji stenografsko svojstvo za iskrivljavanje elementa, pa ćete morati koristiti obje funkcije. U donjem primjeru možemo iskriviti kvadrat od 100 x 100 piksela ulijevo i udesno s skewX:

Pogledajte objašnjenje o Transformaciji olovke od strane CSS-Tricks (@ css-tricks) na CodePenu.

Dok u ovom primjeru možemo vertikalno iskriviti element s pomoću skewY:

Pogledajte objašnjenje o Transformaciji olovke od strane CSS-Tricks (@ css-tricks) na CodePenu.

Ajmo sada skew()kombinirati to dvoje:

Pogledajte
skraćenicu Pen skew () od CSS-Tricks (@ css-tricks)
na CodePenu.

Rotirati

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

To rotira element u smjeru kazaljke na satu od prvobitnog položaja, dok bi ga negativna vrijednost rotirala u suprotnom smjeru. Evo jednostavnog animiranog primjera gdje se kvadrat nastavlja okretati za 360 stupnjeva svake tri sekunde:

Pogledajte objašnjenje o Transformaciji olovke od strane CSS-Tricks (@ css-tricks) na CodePenu.

Mi također mogu koristiti rotateX, rotateYi rotateZfunkcije, kao što je tako:

Pogledajte objašnjenje o Transformaciji olovke od strane CSS-Tricks (@ css-tricks) na CodePenu.

Prevedi

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

Ova funkcija transformacije pomiče element bočno ili gore-dolje. Zašto jednostavno ne koristiti gornji / lijevi / donji / desni? Pa, ponekad je pomalo zbunjujuće. Ja bih o njima razmišljao kao o rasporedu / pozicioniranju (ionako imaju bolju podršku za preglednike), a ovo kao način za pomicanje tih stvari kao dio prijelaza ili animacije.

Te bi vrijednosti bile bilo koje vrijednosti duljine, poput 10 piksela ili 2,4 ema. Jedna vrijednost će pomaknuti element udesno (negativne vrijednosti ulijevo). Ako je navedena druga vrijednost, ta će je druga vrijednost pomaknuti prema dolje (negativne vrijednosti prema gore). Ili možete dobiti određene:

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

Važno je napomenuti da element koji koristi transformneće uzrokovati strujanje drugih elemenata oko njega. Korištenjem translatedonje funkcije i izbacivanjem zelenog kvadrata iz prvobitnog položaja primijetit ćemo kako će okolni tekst ostati fiksiran na mjestu, kao da je kvadrat blok element:

Pogledajte objašnjenje o Transformaciji olovke od strane CSS-Tricks (@ css-tricks) na CodePenu.

Također je vrijedno napomenuti da translateće se, za razliku od toga, hardverski ubrzati ako želite animirati to svojstvo position: absolute.

Višestruke vrijednosti

Pomoću razmaka odvojenog popisa transformsvojstvu možete dodati više vrijednosti :

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

Vrijedno je napomenuti da postoji redoslijed po kojem će se provesti ove transformacije, u gornjem primjeru će se prvo izvršiti `iskošenje`, a zatim će se element skalirati.

Matrica

Funkcija matrixpretvorbe može se koristiti za kombiniranje svih pretvorbi u jednu. To je pomalo nalik skraćenici za transformiranje, samo što ne vjerujem da je stvarno namijenjeno ručnom pisanju. Postoje alati poput The Matrix Resolutions, koji mogu pretvoriti skupinu transformacija u jednu matričnu deklaraciju. Možda to u nekim situacijama može smanjiti veličinu datoteke, iako mikro-optimizacije poput autora neprijatne vjerojatno ne vrijede vašeg vremena.

Za znatiželjnike, ovo:

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

može se predstaviti i kao:

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

3D transformacije

Većina gore navedenih svojstava ima 3D verzije istih.

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

Treća vrijednost u translate3dili vrijednost u translateZpomiče element prema pregledniku, negativne vrijednosti dalje.

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

Treća vrijednost u scale3dili vrijednost u scaleZutječe na skaliranje duž z-osi (npr. Zamišljena crta koja izlazi ravno iz zaslona).

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

rotateXi rotateYrotirat će element u 3D prostoru oko tih osi. rotate3domogućuje vam određivanje točke u 3D prostoru u kojoj ćete rotirati element oko sebe.

matrix3d(… )

Način programskog opisivanja 3D transformacije u mreži 4 × 4. Nitko nikada neće napisati jedan od njih, ikad.

perspective(value)

Ova vrijednost ne utječe na sam element, ali utječe na transformacije 3D transformacija potomstvenih elemenata, omogućujući im da svi imaju konzistentnu dubinsku perspektivu.

Više informacija

  • MDN dokumenti o pretvorbi i upotrebi.
  • Dokumentacija Davida DeSandra o 3D transformacijama
  • Surfin 'Safari: 3D transformacije
  • W3C specifikacije o CSS3 transformacijama
  • Uvod u CSS 3D transformacije

Podrška preglednika

2D transformacije

Krom Safari Firefox Opera IE Android iOS
Bilo koji 3.1+ 3,5+ 10,5+ 9+ 4.1+ Najmanje 4

3D transformacije

Krom Safari Firefox Opera IE Android iOS
10+ 4+ 12+ nijedna 10+ 4.1+ 5+

Prefiksi dobavljača

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