Den transform
egenskab 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 denfont-size
,padding
,height
, ogwidth
af et element, også. Det er også en stenografisk funktion tilscaleX
ogscaleY
funktionerne.skewX()
ogskewY()
: Vipper et element til venstre eller højre, som at omdanne et rektangel til et parallelogram.skew()
er en stenografi, der kombinererskewX()
ogskewY
ved 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 skewX
og skewY
transformer 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
, rotateY
og rotateZ
så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 translate
funktion 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 translate
hardware 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 transform
ejendommen:
.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 matrix
omdanne 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 translate3d
eller værdien i translateZ
flytter elementet mod seeren, negative værdier væk.
scale3d(sx, sy, sz) scaleZ(sz)
Den tredje værdi i scale3d
eller værdien i scaleZ
på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)
rotateX
og rotateY
vil rotere et element i 3D-rummet omkring disse akser. rotate3d
giver 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; )