CSS 3D transformaties

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

---

CSS 3D transformatie

CSS ondersteunt ook 3D-transformaties met deze functie kun je basis transformaties uitvoeren, zoals het verplaatsen, roteren, schalen en scheeftrekken van elementen in een driedimensionale ruimte.

Beweeg de muis over de onderstaande elementen om het verschil tussen een 2D en een 3D-transformatie te zien:

---

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

---

CSS 3D transformatie methodes

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

translate3d()

rotate3d()

scale3d()

rotateX()

rotateY()

rotateZ()

matrix3d()

De translate3d() methode

De translate3d() methode verplaatst het element van de huidige positie naar een nieuwe positie langs de X-, Y- en Z-as. In het onderstaande voorbeeld wordt de afbeelding 15 pixels langs de X- en Y-as, en 25 pixels langs de Z-as verplaatst.

---

De rotate3d() methode

De rotate3d() methode roteert het element met de klok mee of tegen de klok in volgens een bepaalde graad. In het voorbeeld hieronder wordt de afbeelding langs de Y-as geroteert met een hoek van 60 graden.

Je kunt negatieve waarden gebruiken om het element in de tegenovergestelde richting te laten roteren.

---

De scale3d() methode

De scale3d() methode vergroot of verkleint de grootte van een element. Het effect van deze methode is niet helemaal zichtbaar tenzij je deze gebruikt in combinatie met andere transformaties zoals weergegeven in het onderstaande voorbeeld.

De methode scale3d(1, 1, 2) schaalt de elementen langs de Z-as en de methode rotatie3d(1, 0, 0, 60deg) roteert het beeld langs de X-as met een hoek van 60 graden.

De rotateX() methode

De rotateX() methode roteert een element met een bepaalde graad rond de X-as:

---

De rotateY() methode

De rotateY() methode roteert een element met een bepaalde graad rond de Y-as:

---

De rotateZ() methode

De rotateZ() methode roteert een element met een bepaalde graad rond de Z-as:

De matrix3d() methode

De matrix3d() methode combineert alle 3D-transformatie methoden in één. De matrix() methode heeft 16 parameters, die wiskundige functies bevatten, waarmee je elementen kunt roteren, schalen, verplaatsen enz.

Hier is een voorbeeld van het uitvoeren van een 3D-transformatie met behulp van de methode matrix3d().

Wanneer je echter meer dan één transformatie tegelijk wilt uitvoeren, is het handiger om de transformatie methodes te gebruiken en deze in volgorde op te nemen, zoals in de onderstaande voorbeeld:

---

---