CSS 3D transformaties

CSS 3D transformaties

CSS ondersteunt ook 3D transformaties.

Houd de muis boven de onderstaande elementen, om het verschil te zien tussen 2D en 3D transformaties:

2D rotate
3D rotate

In dit hoofdstuk leer je de volgende CSS-eigenschappen:

  • transform

Browser ondersteuning

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 3D-transformatie methoden

via CSS transform Eigenschappen, je kunt de volgende 3D-transformatie methoden gebruiken:

  • rotateX()
  • rotateY()
  • rotateZ()

rotateX() methode

Roteren X

rotateX() Methoden om een element te laten draaien om zijn X-as met een bepaalde hoek:

Voorbeeld

#myDiv {
  transform: rotateX(150deg);
}

Probeer het zelf

rotateY() methode

Roteren Y

rotateY() Methoden om een element te laten draaien om zijn Y-as met een bepaalde hoek:

Voorbeeld

#myDiv {
  transform: rotateY(130deg);
}

Probeer het zelf

rotateZ() methode

rotateZ() Methoden om een element te laten draaien om zijn Z-as met een bepaalde hoek:

Voorbeeld

#myDiv {
  transform: rotateZ(90deg);
}

Probeer het zelf

CSS transformatie eigenschappen

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

Eigenschap Beschrijving
transform Werk een 2D of 3D-transformatie toe aan een element.
transform-origin Laat je de positie van het getransformeerde element veranderen.
transform-style Bepaal hoe ingesloten elementen in een 3D-ruimte worden weergegeven.
perspective Bepaal het perspectief effect van een 3D-element.
perspective-origin Bepaal de onderste positie van een 3D-element.
backface-visibility Definieer of een element zichtbaar is wanneer het niet naar het scherm is gericht.

CSS 3D-transformatie methoden

Functie Beschrijving
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)		 Definieer een 3D-transformatie, gebruik een 4x4-matrix met 16 waarden.
translate3d(x,y,z) Definieer een 3D-rotatie.
translateX(x) Definieer een 3D-rotatie, alleen gebruik de waarde voor de X-assen.
translateY(y) Definieer een 3D-rotatie, alleen gebruik de waarde voor de Y-assen.
translateZ(z) Definieer een 3D-rotatie, alleen gebruik de waarde voor de Z-assen.
scale3d(x,y,z) Definieer een 3D-schuiftransformatie.
scaleX(x) Definieer een 3D-schuiftransformatie door een waarde op de X-assen te geven.
scaleY(y) Definieer een 3D-schuiftransformatie door een waarde op de Y-assen te geven.
scaleZ(z) Definieer een 3D-schuiftransformatie door een waarde op de Z-assen te geven.
rotate3d(x,y,z,hoek) Definieer de 3D rotatie.
rotateX(hoek) Definieer de 3D rotatie langs de X-as.
rotateY(hoek) Definieer de 3D rotatie langs de Y-as.
rotateZ(hoek) Definieer de 3D rotatie langs de Z-as.
perspective(n) Definieer de perspectiefweergave van een 3D transformatie element.