Transformeren - CSS-trucs

Met de transformeigenschap kunt u een element visueel manipuleren door scheeftrekken, roteren, vertalen of schalen:

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

Zelfs met een opgegeven hoogte en breedte, wordt dit element nu geschaald naar twintig keer de oorspronkelijke grootte:

Zie de Pen Transform-uitleg door CSS-Tricks (@ css-tricks) op CodePen.

Als u deze functie twee waarden geeft, wordt deze horizontaal met de eerste en verticaal met de seconde uitgerekt. In het onderstaande voorbeeld is het element nu twee keer zo breed maar half zo hoog als het oorspronkelijke element:

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

Of u kunt specifieker zijn zonder de steno-functie te gebruiken:

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

Maar scale()is slechts een van de vele transformatiefuncties die beschikbaar zijn:

Waarden

• scale(): Beïnvloedt de grootte van het element. Dit geldt ook voor de font-size, padding, heighten widthvan een element, ook. Het is ook aa steno functie voor de scaleXen scaleYfuncties.
• skewX()en skewY(): Kantelt een element naar links of rechts, zoals een rechthoek in een parallellogram verandert. skew()is een afkorting die beide waarden combineert skewX()en skewYaccepteert.
• translate(): Verplaatst een element zijwaarts of op en neer.
• rotate(): Draait het element met de klok mee vanaf de huidige positie.
• matrix(): Een functie die waarschijnlijk niet bedoeld is om met de hand te worden geschreven, maar alle transformaties in één combineert.
• perspective(): Heeft geen invloed op het element zelf, maar beïnvloedt de transformaties van de 3D-transformaties van afstammende elementen, waardoor ze allemaal een consistent diepteperspectief hebben.

Scheef

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

De functies skewXen skewYtransformatiefuncties kantelen een element op de een of andere manier. Onthoud: er is geen steno-eigenschap voor het scheeftrekken van een element, dus u moet beide functies gebruiken. In het onderstaande voorbeeld kunnen we een vierkant van 100 x 100 px naar links en rechts scheeftrekken met skewX:

Zie de Pen Transform-uitleg door CSS-Tricks (@ css-tricks) op CodePen.

Terwijl we in dit voorbeeld een element verticaal kunnen scheeftrekken met skewY:

Zie de Pen Transform-uitleg door CSS-Tricks (@ css-tricks) op CodePen.

Laten we nu gebruiken skew()om de twee te combineren:

Zie de
steno-eigenschap Pen skew () door CSS-Tricks (@ css-tricks)
op CodePen.

Draaien

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

Dit roteert een element met de klok mee vanuit zijn oorspronkelijke positie, terwijl een negatieve waarde het in de tegenovergestelde richting zou draaien. Hier is een eenvoudig geanimeerd voorbeeld waarbij een vierkant elke drie seconden 360 graden blijft draaien:

Zie de Pen Transform-uitleg door CSS-Tricks (@ css-tricks) op CodePen.

We kunnen ook gebruik maken van de rotateX, rotateYen rotateZfuncties als volgt:

Zie de Pen Transform-uitleg door CSS-Tricks (@ css-tricks) op CodePen.

Vertalen

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

Deze transformatiefunctie verplaatst een element zijwaarts, of op en neer. Waarom niet gewoon boven / links / onder / rechts gebruiken? Nou, het is soms een beetje verwarrend. Ik zou die beschouwen als lay-out / positionering (ze hebben sowieso een betere browserondersteuning) en dit als een manier om die dingen te verplaatsen als onderdeel van een overgang of animatie.

Deze waarden zijn elke lengtewaarde, zoals 10px of 2.4em. Eén waarde verplaatst het element naar rechts (negatieve waarden naar links). Als er een tweede waarde wordt opgegeven, wordt deze door die tweede waarde naar beneden verplaatst (negatieve waarden naar boven). Of u kunt specifiek worden:

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

Het is belangrijk op te merken dat een element dat gebruikt, transformer niet voor zorgt dat andere elementen er omheen stromen. Door de translateonderstaande functie te gebruiken en het groene vierkant uit zijn oorspronkelijke positie te duwen, zullen we zien hoe de omringende tekst op zijn plaats blijft, alsof het vierkant een blokelement is:

Zie de Pen Transform-uitleg door CSS-Tricks (@ css-tricks) op CodePen.

Het is ook vermeldenswaard dat translatehet hardware-versneld zal zijn als u die eigenschap wilt animeren, in tegenstelling tot position: absolute.

Meerdere waarden

Met een door spaties gescheiden lijst kunt u meerdere waarden aan de transformeigenschap toevoegen:

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

Het is vermeldenswaard dat er een volgorde is waarin deze transformaties zullen worden uitgevoerd, in het bovenstaande voorbeeld zal 'skew' eerst worden uitgevoerd en vervolgens zal het element worden geschaald.

Matrix

De matrixtransformatiefunctie kan worden gebruikt om alle transformaties in één te combineren. Het is een beetje zoals een afkorting voor transformatie, alleen geloof ik niet dat het echt bedoeld is om met de hand te worden geschreven. Er zijn tools zoals The Matrix Resolutions, die een groep transformaties kunnen omzetten in een enkele matrixverklaring. Misschien kan dit in sommige situaties de bestandsgrootte verkleinen, hoewel auteur-onvriendelijke micro-optimalisaties zoals die waarschijnlijk niet de moeite waard zijn.

Voor nieuwsgierigen dit:

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

kan ook worden weergegeven als:

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

3D-transformaties

De meeste van de bovenstaande eigendommen hebben 3D-versies ervan.

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

De derde waarde in translate3dof de waarde in translateZverplaatst het element naar de kijker, negatieve waarden weg.

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

De derde waarde in scale3dof de waarde in heeft scaleZinvloed op de schaalverdeling langs de z-as (bijv. De denkbeeldige lijn die recht uit het scherm komt).

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

rotateXen rotateYzal een element in 3D-ruimte rond die assen roteren. rotate3dstelt u in staat om een ​​punt in de 3D-ruimte te specificeren waar u het element omheen wilt draaien.

matrix3d(… )

Een manier om programmatisch een 3D-transformatie in een 4 × 4-raster te beschrijven. Niemand zal ooit met de hand een van deze schrijven.

perspective(value)

Deze waarde heeft geen invloed op het element zelf, maar wel op de transformaties van de 3D-transformaties van afstammende elementen, waardoor ze allemaal een consistent diepteperspectief hebben.

Meer informatie

• MDN Docs over transformatie en gebruik.
• David DeSandro's documentatie over 3D-transformaties
• Surfin 'Safari: 3D-transformaties
• W3C-specificatie op CSS3-transformaties
• Inleiding tot CSS 3D-transformaties

Browser-ondersteuning

2D-transformaties

Chrome	Safari	Firefox	Opera	D.W.Z	Android	iOS
Ieder	3.1+	3.5+	10.5+	9+	4.1+	Minstens 4

3D-transformaties

Chrome	Safari	Firefox	Opera	D.W.Z	Android	iOS
10+	4+	12+	geen	10+	4.1+	5+

Voorvoegsels van leveranciers

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