CSS 2D transformaties

CSS 2D transformaties

CSS transformaties (transforms) stellen je in staat om elementen te verplaatsen, te draaien, te schalen en te kantelen.

Houd de muis boven het onderstaande element, om de 2D transformaties te zien:

2D rotate

In dit hoofdstuk zul je de volgende CSS-eigenschappen leren:

  • transform

Browserondersteuning

De cijfers in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.

Eigenschap Chrome IE Firefox Safari Opera
transform 36.0 10.0 16.0 9.0 23.0

CSS 2D transformatie methoden

Door het gebruik van CSS transform Eigenschappen, je kunt de volgende 2D transformatie methoden gebruiken:

  • translate()
  • rotate()
  • scaleX()
  • scaleY()
  • scale()
  • skewX()
  • skewY()
  • skew()
  • matrix()

Tip:Je zult in het volgende hoofdstuk leren over 3D transformaties.

translate() Methode

Translate

translate() Methoden om een element van zijn huidige positie te verplaatsen (op basis van de parameters voor de X- en Y-assen).

Hier volgt een voorbeeld waarbij de <div> element 50 pixels naar rechts en 100 pixels naar beneden wordt verplaatst van zijn huidige positie:

Voorbeeld

div {
  transform: translate(50px, 100px);
}

Probeer het zelf uit

rotate() Methode

Roteren

rotate() Methoden om een element met de opgegeven hoek tegen de klok in of met de klok in te roteren.

Hier volgt een voorbeeld waarbij de <div> element met 20 graden met de klok in wordt geroteerd:

Voorbeeld

div {
  transform: rotate(20deg);
}

Probeer het zelf uit

Gebruik negatieve waarden om een element tegen de klok in te roteren.

Hier volgt een voorbeeld waarbij de <div> element met 20 graden tegen de klok in wordt geroteerd:

Voorbeeld

div {
  transform: rotate(-20deg);
}

Probeer het zelf uit

scale() Methode

Schaal

scale() Methoden om de grootte van een element te vergroten of te verkleinen (op basis van de opgegeven breedte- en hoogteparameters).

Hier volgt een voorbeeld waarbij de <div> element uitgebreid wordt tot het dubbele van zijn oorspronkelijke breedte en het drievoudige van zijn oorspronkelijke hoogte:

Voorbeeld

div {
  transform: scale(2, 3);
}

Probeer het zelf uit

Hier volgt een voorbeeld waarbij de <div> element verkleind wordt tot de helft van zijn oorspronkelijke breedte en hoogte:

Voorbeeld

div {
  transform: scale(0.5, 0.5);
}

Probeer het zelf uit

scaleX() Methode

scaleX() Methoden om de breedte van een element te vergroten of te verkleinen.

Hier volgt een voorbeeld waarbij de <div> element uitgebreid wordt tot het dubbele van zijn oorspronkelijke breedte:

Voorbeeld

div {
  transform: scaleX(2);
}

Probeer het zelf uit

Hier volgt een voorbeeld waarbij de <div> element verkleind wordt tot de helft van zijn oorspronkelijke breedte:

Voorbeeld

div {
  transform: scaleX(0.5);
}

Probeer het zelf uit

scaleY() Methode

scaleY() De methode verhoogt of vermindert de hoogte van het element.

Het volgende voorbeeld vergroot het <div>-element tot driemaal zijn oorspronkelijke hoogte:

Voorbeeld

div {
  transform: scaleY(3);
}

Probeer het zelf uit

Het volgende voorbeeld vermindert het <div>-element tot de helft van zijn oorspronkelijke hoogte:

Voorbeeld

div {
  transform: scaleY(0.5);
}

Probeer het zelf uit

skewX() Methode

skewX() De methode laat het element schuiven over de X-as met de gegeven hoek.

Het volgende voorbeeld laat het <div>-element 20 graden langs de X-as schuiven:

Voorbeeld

div {
  transform: skewX(20deg);
}

Probeer het zelf uit

skewY() Methode

skewY() De methode laat het element schuiven over de Y-as met de gegeven hoek.

Het volgende voorbeeld laat het <div>-element 20 graden langs de Y-as schuiven:

Voorbeeld

div {
  transform: skewY(20deg);
}

Probeer het zelf uit

skew() Methode

skew() De methode laat het element schuiven over de X- en Y-as met de gegeven hoek.

Het volgende voorbeeld maakt het <div>-element 20 graden langs de X-as schuiven, terwijl het 10 graden langs de Y-as schuift:

Voorbeeld

div {
  transform: skew(20deg, 10deg);
}

Probeer het zelf uit

Als de tweede parameter niet wordt gespecificeerd, is de waarde nul. Daarom maakt het volgende voorbeeld het <div>-element 20 graden langs de X-as schuiven:

Voorbeeld

div {
  transform: skew(20deg);
}

Probeer het zelf uit

matrix() Methode

Roteren

matrix() De methode combineert alle 2D transformatie methoden in één.

matrix() De methode accepteert zes parameters, waaronder wiskundige functies, die u kunnen helpen om elementen te draaien, te skaleren, te verplaatsen (verschuiven) en te hellen.

De parameters zijn als volgt: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

Voorbeeld

div {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

Probeer het zelf uit

CSS transformatie-eigenschappen

De tabel hieronder lijst alle 2D transformatie-eigenschappen op:

Eigenschap Beschrijving
transform Werk een 2D of 3D transformatie toe aan het element.
transform-origin Laat u de positie van het geconverteerde element veranderen.

CSS 2D transformatie methoden

Functie Beschrijving
matrix(n,n,n,n,n,n) Definieer een 2D transformatie met behulp van een matrix van zes waarden.
translate(x,y) Definieer een 2D transformatie, verplaats elementen langs de X- en Y-as.
translateX(n) Definieer een 2D transformatie, verplaats elementen langs de X-as.
translateY(n) Definieer een 2D transformatie, verplaats elementen langs de Y-as.
scale(x,y) Definieer een 2D schaalverversing, verander de breedte en hoogte van het element.
scaleX(n) Definieer een 2D schaalverversing, verander de breedte van het element.
scaleY(n) Definieer een 2D schaalverversing, verander de hoogte van het element.
rotate(hoek) Definieer een 2D draaiing, bepaal de hoek in de parameters.
skew(x-hoek,y-hoek) Definieer een 2D hellingsverversing, langs de X en Y-as.
skewX(hoek) Definieer een 2D hellingsverversing, langs de X-as.
skewY(hoek) Definieer een 2D hellingsverversing, langs de Y-as.