Eigenschap | ![]() |
![]() |
![]() |
![]() |
![]() |
Transform | ![]() |
![]() |
![]() |
![]() |
![]() |
transform
kun je de volgende methodes toepassen:
translate() |
rotate() |
scaleX() |
scaleY() |
scale() |
skewX() |
skewY() |
skew() |
matrix() |
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:
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:
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:
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:
In het volgende voorbeeld wordt het element <div> verkleind tot de helft van de oorspronkelijke breedte en hoogte:
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:
In het volgende voorbeeld wordt het element <div> verkleind tot de helft van de oorspronkelijke breedte:
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:
In het volgende voorbeeld wordt het element <div> verkleind tot de helft van de oorspronkelijke hoogte:
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:
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:
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:
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:
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() )
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. |