Förvandla - CSS-tricks

Anonim

Den transformegenskapen kan du visuellt manipulera ett element av skevning, rotation, översätta, eller skalning:

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

Även med en deklarerad höjd och bredd skalas detta element nu till tjugo gånger sin ursprungliga storlek:

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

Genom att ge denna funktion två värden kommer den att sträcka sig horisontellt med den första och vertikalt med den andra. I exemplet nedan kommer elementet nu att vara dubbelt så brett men hälften av det ursprungliga elementet:

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

Eller så kan du vara mer specifik utan att använda stenografi-funktionen:

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

Men scale()är bara en av många transformationsfunktioner som är tillgängliga:

Värden

  • scale(): Påverkar storleken på elementet. Detta gäller även font-size, padding, heightoch widthav ett element också. Det är också en kortfattad funktion för scaleXoch scaleYfunktionerna.
  • skewX()och skewY(): lutar ett element åt vänster eller höger, som att göra en rektangel till ett parallellogram. skew()är en stenografi som kombinerar skewX()och skewYaccepterar båda värdena.
  • translate(): Flyttar ett element i sidled eller upp och ner.
  • rotate(): Roterar elementet medurs från dess nuvarande position.
  • matrix(): En funktion som förmodligen inte är tänkt att skrivas för hand, men som kombinerar alla förvandlingar till en.
  • perspective(): Påverkar inte själva elementet, men påverkar omvandlingen av nedstigande element 3D-omvandlingar, så att alla kan ha ett konsekvent djupperspektiv.

Skev

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

Den skewXoch skewYomvandla funktioner tilt ett element på ett eller annat sätt. Kom ihåg: det finns ingen stenografisk egenskap för att skeva ett element, så du måste använda båda funktionerna. I exemplet nedan kan vi vrida en fyrkant på 100 pixlar x 100 pixlar till vänster och höger med skewX:

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

Medan vi i det här exemplet kan vrida ett element vertikalt med med skewY:

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

Låt oss skew()nu kombinera de två:

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

Rotera

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

Detta roterar ett element medurs från sitt ursprungliga läge, medan ett negativt värde skulle rotera det i motsatt riktning. Här är ett enkelt animerat exempel där en fyrkant fortsätter att rotera 360 grader var tredje sekund:

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

Vi kan också använda rotateX, rotateYoch rotateZfunktionerna, som så:

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

Översätt

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

Denna transformeringsfunktion flyttar ett element i sidled eller upp och ner. Varför inte bara använda top / left / bottom / right? Det är ibland lite förvirrande. Jag skulle tänka på dem som layout / positionering (de har bättre webbläsarstöd ändå) och detta som ett sätt att flytta dessa saker som en del av en övergång eller animering.

Dessa värden skulle vara vilket längdvärde som helst, som 10 pixlar eller 2.4 em. Ett värde flyttar elementet åt höger (negativa värden till vänster). Om ett andra värde tillhandahålls flyttar det andra värdet neråt (negativa värden uppåt). Eller så kan du bli specifik:

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

Det är viktigt att notera att ett element som använder inte transformkommer att få andra element att flyta runt det. Genom att använda translatefunktionen nedan och knuffa den gröna fyrkanten ur sin ursprungliga position kommer vi att märka hur den omgivande texten kommer att förbli fast på plats, som om kvadraten är ett blockelement:

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

Det är också värt att notera att translatehårdvaruaccelereras om du vill animera den egenskapen, till skillnad från position: absolute.

Flera värden

Med en platsavgränsad lista kan du lägga till flera värden i transformegenskapen:

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

Det är värt att notera att det finns en ordning i vilken dessa omvandlingar kommer att utföras, i exemplet ovan kommer "skev" att utföras först och sedan skalas elementet.

Matris

Den matrixtransformfunktionen kan användas för att kombinera alla förvandlas till en. Det är lite som att förvandla stenografi, bara jag tror inte att det verkligen är tänkt att skrivas för hand. Det finns verktyg där som The Matrix Resolutions, som kan konvertera en grupp transformationer till en enda matrixdeklaration. I vissa situationer kan detta kanske minska filstorleken, även om sådana författarvänliga mikrooptimeringar sannolikt inte är värda din tid.

För nyfikna detta:

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

kan också representeras som:

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

3D-omvandlingar

De flesta av ovanstående egenskaper har 3D-versioner av dem.

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

Det tredje värdet i translate3deller värdet i translateZflyttar elementet mot betraktaren, negativa värden borta.

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

Det tredje värdet i scale3deller värdet i scaleZpåverkar skalningen längs z-axeln (t.ex. den imaginära linjen som kommer rakt ut ur skärmen).

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

rotateXoch rotateYkommer att rotera ett element i 3D-rymden runt dessa axlar. rotate3dlåter dig ange en punkt i 3D-utrymme där du kan rotera elementet.

matrix3d(… )

Ett sätt att programmatiskt beskriva en 3D-transformation i ett 4 × 4-rutnät. Ingen kommer någonsin att skriva en av dessa någonsin.

perspective(value)

Det här värdet påverkar inte själva elementet, men det påverkar omvandlingen av nedstigande element 3D-omvandlingar, så att de alla har ett konsekvent djupperspektiv.

Mer information

  • MDN Docs om transformation och användning.
  • David DeSandros dokumentation om 3D-omvandlingar
  • Surfin 'Safari: 3D-omvandlingar
  • W3C-specifikation på CSS3-transformationer
  • Introduktion till CSS 3D-omvandlingar

Webbläsarstöd

2D-omvandlingar

Krom Safari Firefox Opera IE Android iOS
Några 3.1+ 3,5+ 10,5+ 9+ 4.1+ Minst 4

3D-omvandlingar

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

Leverantörsprefix

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