Forvandle - CSS-triks

Anonim

Den transformegenskapen gjør det mulig å visuelt manipulere et element ved forskyvning ved å rotere, å oversette eller skalerings:

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

Selv med en oppgitt høyde og bredde skal dette elementet nå skaleres til tjue ganger sin opprinnelige størrelse:

Se Pen Transform-forklaring av CSS-Tricks (@ css-tricks) på CodePen.

Ved å gi denne funksjonen to verdier, strekkes den horisontalt med den første og vertikalt med den andre. I eksemplet nedenfor vil elementet nå være dobbelt så bredt, men halvparten av høyden til det opprinnelige elementet:

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

Eller du kan være mer spesifikk uten å bruke stenografi-funksjonen:

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

Men scale()er bare en av mange transformasjonsfunksjoner som er tilgjengelige:

Verdier

  • scale(): Påvirker størrelsen på elementet. Dette gjelder også for den font-size, padding, height, og widthav et element, også. Det er også en stenografisk funksjon for scaleXog scaleYfunksjonene.
  • skewX()og skewY(): Vipper et element mot venstre eller høyre, som å gjøre et rektangel til et parallellogram. skew()er en stenografi som kombinerer skewX()og skewYved å akseptere begge verdiene.
  • translate(): Flytter et element sidelengs eller opp og ned.
  • rotate(): Roter elementet med klokken fra sin nåværende posisjon.
  • matrix(): En funksjon som sannsynligvis ikke er ment å skrives for hånd, men som kombinerer alle transformasjoner til en.
  • perspective(): Påvirker ikke selve elementet, men påvirker transformasjonene av nedstigende elementers 3D-transformasjoner, slik at de alle får et konsistent dybdeperspektiv.

Skjev

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

Funksjonene skewXog skewYtransformere vipper et element på en eller annen måte. Husk: det er ingen forkortelsesegenskaper for å vri et element, så du må bruke begge funksjonene. I eksemplet nedenfor kan vi skjev en 100px x 100px firkant til venstre og høyre med skewX:

Se Pen Transform-forklaring av CSS-Tricks (@ css-tricks) på CodePen.

Mens vi i dette eksemplet kan skje et element vertikalt med med skewY:

Se Pen Transform-forklaring av CSS-Tricks (@ css-tricks) på CodePen.

La oss nå bruke skew()til å kombinere de to:

Se Pen
skew () stenografi-egenskapen av CSS-Tricks (@ css-tricks)
på CodePen.

Rotere

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

Dette roterer et element med urviseren fra sin opprinnelige posisjon, mens en negativ verdi vil rotere det i motsatt retning. Her er et enkelt animert eksempel der en firkant fortsetter å rotere 360 ​​grader hvert tredje sekund:

Se Pen Transform-forklaring av CSS-Tricks (@ css-tricks) på CodePen.

Vi kan også bruke funksjonene rotateX, rotateYog rotateZslik:

Se Pen Transform-forklaring av CSS-Tricks (@ css-tricks) på CodePen.

Oversette

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

Denne transformasjonsfunksjonen beveger et element sidelengs, eller opp og ned. Hvorfor ikke bare bruke topp / venstre / bunn / høyre? Vel, det er litt forvirrende til tider. Jeg vil tenke på dem som layout / posisjonering (de har bedre nettleserstøtte uansett) og dette som en måte å flytte disse tingene på som en del av en overgang eller animasjon.

Disse verdiene vil være hvilken som helst lengdeverdi, som 10px eller 2.4em. En verdi vil flytte elementet til høyre (negative verdier til venstre). Hvis en annen verdi er gitt, vil den andre verdien flytte den ned (negative verdier opp). Eller du kan bli spesifikk:

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

Det er viktig å merke seg at et element som bruker transformikke vil føre til at andre elementer flyter rundt det. Ved å bruke translatefunksjonen nedenfor og peke den grønne firkanten ut av sin opprinnelige posisjon, vil vi legge merke til hvordan den omkringliggende teksten vil forbli fast på plass, som om firkanten er et blokkelement:

Se Pen Transform-forklaring av CSS-Tricks (@ css-tricks) på CodePen.

Det er også verdt å merke seg at translatemaskinvareakselerert hvis du vil animere den eiendommen, i motsetning til position: absolute.

Flere verdier

Med en plassskilt liste kan du legge til flere verdier til transformeiendommen:

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

Det er verdt å merke seg at det er en rekkefølge som disse transformasjonene vil bli utført i i eksemplet ovenfor vil "skjevhet" utføres først, og deretter skal elementet skaleres.

Matrise

Den matrixtrans funksjonen kan brukes til å kombinere alle forvandles til en. Det er litt som å transformere stenografi, bare jeg tror ikke det egentlig er ment å være skrevet for hånd. Det er verktøy der ute som The Matrix Resolutions, som kan konvertere en gruppe transformasjoner til en enkelt matrisedeklarasjon. Kanskje i noen situasjoner kan dette redusere filstørrelsen, selv om forfatter-uvennlige mikrooptimaliseringer som dette sannsynligvis ikke er verdt tiden din.

For nysgjerrige, dette:

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

kan også vises som:

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

3D-transformasjoner

De fleste av de ovennevnte egenskapene har 3D-versjoner av dem.

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

Den tredje verdien i translate3deller verdien i translateZflytter elementet mot betrakteren, negative verdier unna.

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

Den tredje verdien i scale3deller verdien i scaleZpåvirker skaleringen langs z-aksen (f.eks. Den imaginære linjen som kommer rett ut av skjermen).

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

rotateXog rotateYvil rotere et element i 3D-rommet rundt disse aksene. rotate3dlar deg spesifisere et punkt i 3D-rommet der du skal rotere elementet.

matrix3d(… )

En måte å programmatisk beskrive en 3D-transformasjon i et 4 × 4-rutenett. Ingen vil noensinne skrive en av disse.

perspective(value)

Denne verdien påvirker ikke selve elementet, men det påvirker transformasjonene av nedstigende elementers 3D-transformasjoner, slik at de alle har et konsistent dybdeperspektiv.

Mer informasjon

  • MDN Docs om transformasjon og bruk.
  • David DeSandros dokumentasjon om 3D-transformasjoner
  • Surfin 'Safari: 3D-transformasjoner
  • W3C-spesifikasjon på CSS3-transformasjoner
  • Introduksjon til CSS 3D-transformasjoner

Nettleserstøtte

2D-transformasjoner

Chrome Safari Firefox Opera DVS Android iOS
Noen 3.1+ 3.5+ 10.5+ 9+ 4.1+ Minst 4

3D-transformasjoner

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

Leverandørprefikser

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