CSS Basis
Selectors
Geavanceerd
CSS Basis
Selectors
Geavanceerd

CSS 2D transformaties

Met de CSS 2D-transformatie functie kunnen elementen worden getransformeerd in 2D.

CSS 2D transformatie

Met CSS-transformaties kun je elementen verplaatsen, roteren, schalen en scheeftrekken. Beweeg met de muis over het onderstaande element om een ​​2D-transformatie te zien:

2D Rotatie

Browser ondersteuning

De getallen in de tabel geven de browserversie aan die de eigenschap volledig ondersteunt. Hou de muis op de afbeelding in het tabel om de versie nummer van de browsers te weergeven.

Eigenschap
Transform Ja Ja Ja Ja Ja

CSS 2D transformatie methodes

Voor de CSS eigenschap transform kun je de volgende methodes toepassen:

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

De translate() methode

 Orgineel
 Getransformeerd

De translate() methode verplaatst een element van zijn huidige positie (volgens de parameters die zijn opgegeven voor de X-as en de Y-as).

In het volgende voorbeeld wordt vanaf de huidige positie het element <div> 30 pixels naar rechts en 25 pixels omlaag verplaatst:

VoorbeeldVoorbeeld: 
div {
  transform: translate(30px, 25px);
}

De rotate() methode

 
 Getransformeerd

De rotate() methode roteert een element met de klok mee of tegen de klok in volgens een bepaalde graad.

In het volgende voorbeeld wordt het element <div> 20 graden met de klok mee gedraaid:

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

Als je negatieve waarden gebruikt, wordt het element tegen de klok in gedraaid.

In het volgende voorbeeld wordt het element <div> 20 graden tegen de klok in gedraaid:

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

De scale() methode

 Orgineel
 Getransformeerd

De scale() methode vergroot of verkleint de grootte van een element (volgens de parameters die zijn opgegeven voor de breedte en hoogte).

In het volgende voorbeeld wordt het element <div> vergroot tot twee keer de oorspronkelijke breedte en drie keer de oorspronkelijke hoogte:

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

In het volgende voorbeeld wordt het element <div> verkleind tot de helft van de oorspronkelijke breedte en hoogte:

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

De scaleX() methode

De scaleX() methode vergroot of verkleint de breedte van een element.

In het volgende voorbeeld wordt het element <div> vergroot tot twee keer de oorspronkelijke breedte:

VoorbeeldVoorbeeld: 
div {
  transform: scaleX(2);
}

In het volgende voorbeeld wordt het element <div> verkleind tot de helft van de oorspronkelijke breedte:

VoorbeeldVoorbeeld: 
div {
  transform: scaleX(0.5);
}

De scaleY() methode

De scaleY() methode verhoogt of verlaagt de hoogte van een element.

In het volgende voorbeeld wordt het element <div> vergroot tot drie keer de oorspronkelijke hoogte:

VoorbeeldVoorbeeld: 
div {
  transform: scaleY(3); 
}

In het volgende voorbeeld wordt het element <div> verkleind tot de helft van de oorspronkelijke hoogte:

VoorbeeldVoorbeeld: 
div {
  transform: scaleY(0.5);
}

De skewX() methode

De skewX() methode verschuift een element langs de X-as met de opgegeven hoek.

In het volgende voorbeeld wordt het <div> element 20 graden scheefgetrokken langs de X-as:

VoorbeeldVoorbeeld: 
div {
  transform: skewX(20deg);
}

De skewY() methode

De skewY() methode verschuift een element langs de Y-as met de opgegeven hoek.

In het volgende voorbeeld wordt het <div> element 20 graden scheefgetrokken langs de Y-as:

VoorbeeldVoorbeeld: 
div {
  transform: skewY(20deg);
}

De skew() methode

De skew() methode verschuift een element langs de X en Y-as met de opgegeven hoeken.

In het voorbeeld hieronder zien we dat het element <div> 20 graden wordt scheefgetrokken langs de X-as en 10 graden langs de Y-as:

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

Wanneer de tweede parameter niet is opgegeven, dan krijfgt deze automatische de waarde 0 toegekend. In het volgende voorbeeld wordt het <div> element dus 20 graden scheefgetrokken alleen langs de X-as:

VoorbeeldVoorbeeld: 
div {
  transform: skew(20deg);
}

De matrix() methode

 Orgineel
 Getransformeerd

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

De matrix() methode heeft zes parameters, die wiskundige functies bevatten, waarmee je elementen kunt roteren, schalen, verplaatsen en scheeftrekken.

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

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

Methodes in het kort

Methode Beschrijving
translate(x,y) De translate() methode verplaatst een element van zijn huidige positie (volgens de parameters die zijn opgegeven voor de X-as en de Y-as).
translateX(x) De translate() methode verplaatst een element van zijn huidige positie (volgens de parameters die zijn opgegeven voor de X-as).
translateY(y) De translate() methode verplaatst een element van zijn huidige positie (volgens de parameters die zijn opgegeven voor de Y-as).
rotate() De rotate() methode roteert een element met de klok mee of tegen de klok in.
scale(x,y) De scale() methode vergroot of verkleint de grootte van een element (volgens de parameters die zijn opgegeven voor de breedte en hoogte).
scaleX(x) De scaleX() methode vergroot of verkleint de breedte van een element.
scaleY(y) De scaleY() methode verhoogt of verlaagt de hoogte van een element.
skew(x,y) De skew() methode verschuift een element langs de X en Y-as met de opgegeven hoeken.
skewX(x) De skewX() methode verschuift een element langs de X-as met de opgegeven hoek.
skewY(y) De skewY() methode verschuift een element langs de Y-as met de opgegeven hoek.
matrix(n,n,n,n,n,n) De matrix() methode combineert alle 2D-transformatie methoden in één.
Ad blocker gedetecteerd!
  Ons website heeft gedetecteerd dat u een Ad blocker gebruikt. Codecenter.nl is gratis, wij blijven overeind door het weergeven van advertenties en u kunt ons daarbij helpen. Het wordt aanbevolen om uw Ad blocker uit te schakelen zodat u verder gebruik kunt maken van codecenter.nl, alvast bedankt.