Transformere - CSS-tricks

Anonim

Den transformegenskab giver dig mulighed for visuelt at manipulere et element ved skævvridning, roterende, oversætte, eller skalering:

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

Selv med en angivet højde og bredde skaleres dette element nu til tyve gange dets oprindelige størrelse:

Se Pen Transform-forklaringen af ​​CSS-Tricks (@ css-tricks) på CodePen.

Ved at give denne funktion to værdier strækkes den vandret med den første og lodret med den anden. I nedenstående eksempel vil elementet nu være dobbelt så bredt, men halvt så højt som det oprindelige element:

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

Eller du kan være mere specifik uden brug af stenografi-funktionen:

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

Men scale()er kun en af ​​de mange transformationsfunktioner, der er tilgængelige:

Værdier

  • scale(): Påvirker elementets størrelse. Dette gælder også for den font-size, padding, height, og widthaf et element, også. Det er også en stenografisk funktion til scaleXog scaleYfunktionerne.
  • skewX()og skewY(): Vipper et element til venstre eller højre, som at omdanne et rektangel til et parallelogram. skew()er en stenografi, der kombinerer skewX()og skewYved at acceptere begge værdier.
  • translate(): Flytter et element sidelæns eller op og ned.
  • rotate(): Roterer elementet med uret fra dets aktuelle position.
  • matrix(): En funktion, der sandsynligvis ikke er beregnet til at blive skrevet i hånden, men kombinerer alle transformationer til en.
  • perspective(): Påvirker ikke selve elementet, men påvirker transformationer af nedstigende elementers 3D-transformationer, så de alle har et ensartet dybdeperspektiv.

Skæv

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

Funktionerne skewXog skewYtransformer vipper et element på den ene eller den anden måde. Husk: der er ingen stenografisk egenskab til at skæve et element, så du bliver nødt til at bruge begge funktioner. I eksemplet nedenfor kan vi skæve en firkant på 100 pixels x 100 pixels til venstre og højre med skewX:

Se Pen Transform-forklaringen af ​​CSS-Tricks (@ css-tricks) på CodePen.

Mens vi i dette eksempel kan skæve et element lodret med med skewY:

Se Pen Transform-forklaringen af ​​CSS-Tricks (@ css-tricks) på CodePen.

Lad os nu bruge skew()til at kombinere de to:

Se Pen
skew () stenografiegenskab af CSS-Tricks (@ css-tricks)
på CodePen.

Rotere

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

Dette roterer et element med uret fra dets oprindelige position, mens en negativ værdi vil rotere det i den modsatte retning. Her er et simpelt animeret eksempel, hvor en firkant fortsætter med at rotere 360 ​​grader hvert tredje sekund:

Se Pen Transform-forklaringen af ​​CSS-Tricks (@ css-tricks) på CodePen.

Vi kan også bruge funktionerne rotateX, rotateYog rotateZsådan:

Se Pen Transform-forklaringen af ​​CSS-Tricks (@ css-tricks) på CodePen.

Oversætte

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

Denne transformeringsfunktion flytter et element sidelæns eller op og ned. Hvorfor ikke bare bruge top / venstre / bund / højre? Det er til tider lidt forvirrende. Jeg vil tænke på dem som layout / positionering (de har alligevel bedre browserstøtte) og dette som en måde at flytte disse ting rundt som en del af en overgang eller animation.

Disse værdier vil være en hvilken som helst længdeværdi, som 10px eller 2.4em. Én værdi flytter elementet til højre (negative værdier til venstre). Hvis der gives en anden værdi, flytter den anden værdi den ned (negative værdier op). Eller du kan få specifikke:

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

Det er vigtigt at bemærke, at et element, der bruger transform, ikke får andre elementer til at strømme rundt om det. Ved at bruge nedenstående translatefunktion og skubbe den grønne firkant ud af sin oprindelige position, vil vi bemærke, hvordan den omgivende tekst forbliver fast på plads, som om firkanten er et blokelement:

Se Pen Transform-forklaringen af ​​CSS-Tricks (@ css-tricks) på CodePen.

Det er også værd at bemærke, at translatehardware accelereres, hvis du ikke vil animere den egenskab position: absolute.

Flere værdier

Med en pladsadskilt liste kan du tilføje flere værdier til transformejendommen:

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

Det er værd at bemærke, at der er en rækkefølge, hvor disse transformationer vil blive udført, i eksemplet ovenfor udføres 'skævhed' først og derefter skaleres elementet.

Matrix

Den matrixomdanne funktionen kan bruges til at kombinere alle transformationer i én. Det er lidt som at transformere stenografi, kun jeg tror ikke, det virkelig er beregnet til at blive skrevet i hånden. Der er værktøjer derude som The Matrix Resolutions, som kan konvertere en gruppe transformationer til en enkelt matrixerklæring. Måske i nogle situationer kan dette reducere filstørrelsen, selvom forfatter-uvenlige mikrooptimeringer som det sandsynligvis ikke er din tid værd.

For nysgerrige, dette:

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

kan også repræsenteres som:

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

3D-transformationer

De fleste af ovenstående egenskaber har 3D-versioner af dem.

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

Den tredje værdi i translate3deller værdien i translateZflytter elementet mod seeren, negative værdier væk.

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

Den tredje værdi i scale3deller værdien i scaleZpåvirker skaleringen langs z-aksen (f.eks. Den imaginære linje, der kommer lige ud af skærmen).

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

rotateXog rotateYvil rotere et element i 3D-rummet omkring disse akser. rotate3dgiver dig mulighed for at specificere et punkt i 3D-rummet, hvor elementet skal roteres rundt.

matrix3d(… )

En måde at programmatisk beskrive en 3D-transformation i et 4 × 4-gitter. Ingen vil nogensinde håndskrive en af ​​disse nogensinde.

perspective(value)

Denne værdi påvirker ikke selve elementet, men det påvirker transformeringerne af efterkommende elementers 3D-transformationer, så de alle har et ensartet dybdeperspektiv.

Mere information

  • MDN Docs om transformation og brug.
  • David DeSandros dokumentation om 3D-transformationer
  • Surfin 'Safari: 3D-transformationer
  • W3C-specifikation for CSS3-transformationer
  • Introduktion til CSS 3D-transformationer

Browsersupport

2D Transformer

Chrome Safari Firefox Opera IE Android iOS
Nogen 3.1+ 3.5+ 10.5+ 9+ 4.1+ Mindst 4

3D-transformationer

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

Sælgerpræfikser

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