Preoblikovati - CSS-triki

Anonim

transformLastnost vam omogoča, da vizualno manipulirati element po nesimetričnosti, vrtenje, prevajanje, ali povečanje:

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

Tudi z deklarirano višino in širino bo ta element zdaj pomanjšan na dvajsetkratnik svoje prvotne velikosti:

Glejte razlago Pen Transform s strani CSS-Tricks (@ css-tricks) na CodePen.

Če daste tej funkciji dve vrednosti, jo raztegnete vodoravno za prvo in navpično za drugo. V spodnjem primeru bo element zdaj dvakrat širši, vendar polovica višine prvotnega elementa:

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

Lahko pa ste natančnejši, ne da bi uporabili funkcijo okrajšave:

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

Vendar scale()je le eden od mnogih, preoblikovanje funkcije, ki so na voljo:

Vrednote

  • scale(): Vpliva na velikost elementa. To velja tudi za font-size, padding, height, in widthv elementu, preveč. To je tudi kratica za funkcije scaleXin scaleY.
  • skewX()in skewY(): Nagne element v levo ali desno, na primer pretvorba pravokotnika v paralelogram. skew()je okrajšava, ki združuje skewX()in skewYsprejema obe vrednosti.
  • translate(): Premakne element vstran ali navzgor in navzdol.
  • rotate(): Zasuka element v smeri urnega kazalca od trenutnega položaja.
  • matrix(): Funkcija, ki najbrž ni namenjena ročnemu zapisu, ampak združuje vse pretvorbe v eno.
  • perspective(): Ne vpliva na sam element, vpliva pa na preoblikovanje 3D preobrazbe potomskih elementov, kar jim omogoča dosledno globinsko perspektivo.

Skew

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

Funkcije skewXin in skewYtransformirajo element tako ali drugače. Ne pozabite: za poševnost elementa ni nobene stenografske lastnosti, zato boste morali uporabiti obe funkciji. V spodnjem primeru lahko kvadrat 100px x 100px nagnemo levo in desno z skewX:

Glejte razlago Pen Transform s strani CSS-Tricks (@ css-tricks) na CodePen.

Medtem ko lahko v tem primeru pokončno postavimo element z skewY:

Glejte razlago Pen Transform s strani CSS-Tricks (@ css-tricks) na CodePen.

Zdaj pa uporabimo skew()kombinacijo obeh:

Oglejte si
stenografsko lastnost Pen skew () avtorja CSS-Tricks (@ css-tricks)
na CodePen.

Zavrti

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

To zasuče element v smeri urnega kazalca iz prvotnega položaja, negativna vrednost pa ga vrti v nasprotno smer. Tu je preprost animirani primer, ko se kvadrat še naprej vrti za 360 stopinj vsake tri sekunde:

Glejte razlago Pen Transform s strani CSS-Tricks (@ css-tricks) na CodePen.

Mi lahko uporabite tudi rotateX, rotateYin rotateZfunkcije, kot so:

Glejte razlago Pen Transform s strani CSS-Tricks (@ css-tricks) na CodePen.

Prevesti

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

Ta funkcija pretvorbe premika element vstran ali navzgor in navzdol. Zakaj ne bi uporabili zgoraj / levo / spodaj / desno? No, včasih je nekoliko zmedeno. O teh bi razmišljal kot o postavitvi / pozicioniranju (vseeno imajo boljšo podporo za brskalnike) in to kot način za premikanje teh stvari kot del prehoda ali animacije.

Te vrednosti bi bile poljubne vrednosti dolžine, na primer 10px ali 2,4em. Ena vrednost bo element premaknila v desno (negativne vrednosti v levo). Če je navedena druga vrednost, jo bo ta druga vrednost premaknila navzdol (negativne vrednosti navzgor). Lahko pa dobite natančno:

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

Pomembno je vedeti, da element, ki uporablja transform, ne bo povzročil pretoka drugih elementov okoli njega. Z uporabo spodnje translatefunkcije in potiskanjem zelenega kvadrata iz prvotnega položaja bomo opazili, kako bo okoliško besedilo ostalo na svojem mestu, kot da je kvadrat blok element:

Glejte razlago Pen Transform s strani CSS-Tricks (@ css-tricks) na CodePen.

Prav tako je treba omeniti, da translatebo strojna oprema pospešena, če želite to lastnost animirati position: absolute.

Več vrednosti

S presledkom ločenim seznamom lahko transformlastnosti dodate več vrednosti :

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

Omeniti velja, da obstaja vrstni red, v katerem bodo izvedene te transformacije, v zgornjem primeru bo najprej izveden "skew", nato pa bo element merjen.

Matrica

S matrixfunkcijo pretvorbe lahko združite vse pretvorbe v eno. Podobno je preoblikovani stenografiji, le da ne verjamem, da je resnično namenjena pisanju z roko. Obstajajo orodja, kot so The Matrix Resolutions, ki lahko pretvorijo skupino pretvorb v eno samo matrično izjavo. Morda lahko v nekaterih primerih to zmanjša velikost datoteke, čeprav takšne mikro optimizacije, ki niso prijazne do avtorjev, verjetno niso vredne vašega časa.

Za radovedneže to:

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

lahko tudi kot:

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

3D preobrazbe

Večina zgornjih lastnosti ima 3D različice.

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

Tretja vrednost v translate3dali vrednost v translateZpremakne element proti gledalcu, negativne vrednosti pa stran.

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

Tretja vrednost v scale3dali vrednost v scaleZvpliva na skaliranje vzdolž osi z (npr. Namišljena črta, ki prihaja naravnost iz zaslona).

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

rotateXin rotateYbo zasukal element v 3D prostoru okoli teh osi. rotate3dvam omogoča, da določite točko v 3D prostoru, v kateri želite zasukati element okoli.

matrix3d(… )

Način programskega opisovanja 3D-transformacije v mreži 4 × 4. Nikoli nihče ne bo napisal roke, kdajkoli.

perspective(value)

Ta vrednost ne vpliva na sam element, vpliva pa na transformacije 3D-pretvorb potomskih elementov, kar jim omogoča dosledno globinsko perspektivo.

Več informacij

  • Dokumenti MDN o preoblikovanju in uporabi.
  • Dokumentacija Davida DeSandra o 3D preobrazbah
  • Surfin 'Safari: 3D preobrazbe
  • Specifikacije W3C o preoblikovanju CSS3
  • Uvod v CSS 3D preobrazbe

Podpora za brskalnik

2D preobrazbe

Chrome Safari Firefox Opera IE Android iOS
Kaj 3.1+ 3,5+ 10,5+ 9+ 4.1+ Vsaj 4

3D preobrazbe

Chrome Safari Firefox Opera IE Android iOS
10+ 4+ 12+ nobenega 10+ 4.1+ 5+

Predpone prodajalcev

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