CSS 2D-transformaties
CSS 2D-transformaties
Met CSS-transformaties kunt u elementen verplaatsen, roteren, schalen en scheeftrekken.
Beweeg met de muis over het onderstaande element om een 2D-transformatie te zien:
In dit hoofdstuk leer je over de volgende CSS-eigenschap:
transform
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
| Property | |||||
|---|---|---|---|---|---|
| transform | 36.0 |
10.0 |
16.0 |
9.0 |
23.0 |
Methoden voor CSS 2D-transformatie
Met de CSS transform-eigenschap kunt u de volgende 2D-transformatiemethoden gebruiken:
translate()rotate()scaleX()scaleY()scale()skewX()skewY()skew()matrix()
Tip: In het volgende hoofdstuk leert u meer over 3D-transformaties.
De translate() methode
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 het element <div> 50 pixels naar rechts verplaatst en 100 pixels omlaag vanaf de huidige positie:
Voorbeeld
div
{
transform: translate(50px, 100px);
}
De methode roteren()
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:
Voorbeeld
div
{
transform: rotate(20deg);
}
Als u negatieve waarden gebruikt, wordt het element tegen de klok in gedraaid.
In het volgende voorbeeld wordt het <div>-element 20 graden tegen de klok in gedraaid:
Voorbeeld
div
{
transform: rotate(-20deg);
}
De scale()-methode
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:
Voorbeeld
div
{
transform: scale(2, 3);
}
In het volgende voorbeeld wordt het element <div> verkleind tot de helft van de oorspronkelijke breedte en hoogte:
Voorbeeld
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:
Voorbeeld
div
{
transform: scaleX(2);
}
In het volgende voorbeeld wordt het element <div> verkleind tot de helft van de oorspronkelijke breedte:
Voorbeeld
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:
Voorbeeld
div
{
transform: scaleY(3);
}
In het volgende voorbeeld wordt het element <div> verkleind tot de helft van de oorspronkelijke hoogte:
Voorbeeld
div
{
transform: scaleY(0.5);
}
De methode skewX()
De skewX()methode verschuift een element langs de X-as met de gegeven hoek.
In het volgende voorbeeld wordt het <div>-element 20 graden scheefgetrokken langs de X-as:
Voorbeeld
div
{
transform: skewX(20deg);
}
De methode skewY()
De skewY()methode verschuift een element langs de Y-as met de gegeven hoek.
In het volgende voorbeeld wordt het <div>-element 20 graden scheefgetrokken langs de Y-as:
Voorbeeld
div
{
transform: skewY(20deg);
}
De methode skew()
De skew()methode verschuift een element langs de X- en Y-as met de gegeven hoeken.
In het volgende voorbeeld wordt het <div>-element 20 graden scheefgetrokken langs de X-as en 10 graden langs de Y-as:
Voorbeeld
div
{
transform: skew(20deg, 10deg);
}
Als de tweede parameter niet is opgegeven, heeft deze een waarde nul. In het volgende voorbeeld wordt het <div>-element dus 20 graden scheefgetrokken langs de X-as:
Voorbeeld
div
{
transform: skew(20deg);
}
De matrix()-methode
De matrix()methode combineert alle 2D-transformatiemethoden in één.
De matrix()-methode heeft zes parameters, die wiskundige functies bevatten, waarmee u elementen kunt roteren, schalen, verplaatsen (vertalen) en scheeftrekken.
De parameters zijn als volgt: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
Voorbeeld
div
{
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
Eigenschappen CSS-transformatie
De volgende tabel bevat alle 2D-transformatie-eigenschappen:
| Property | Description |
|---|---|
| transform | Applies a 2D or 3D transformation to an element |
| transform-origin | Allows you to change the position on transformed elements |
CSS 2D-transformatiemethoden
| Function | Description |
|---|---|
| matrix(n,n,n,n,n,n) | Defines a 2D transformation, using a matrix of six values |
| translate(x,y) | Defines a 2D translation, moving the element along the X- and the Y-axis |
| translateX(n) | Defines a 2D translation, moving the element along the X-axis |
| translateY(n) | Defines a 2D translation, moving the element along the Y-axis |
| scale(x,y) | Defines a 2D scale transformation, changing the elements width and height |
| scaleX(n) | Defines a 2D scale transformation, changing the element's width |
| scaleY(n) | Defines a 2D scale transformation, changing the element's height |
| rotate(angle) | Defines a 2D rotation, the angle is specified in the parameter |
| skew(x-angle,y-angle) | Defines a 2D skew transformation along the X- and the Y-axis |
| skewX(angle) | Defines a 2D skew transformation along the X-axis |
| skewY(angle) | Defines a 2D skew transformation along the Y-axis |