Alle elementen worden plat weergegeven op de webpagina. Toch kunnen we diepte toevoegen. perspective voegt een 3D-effect toe aan elementen. De syntaxis is als volgt:

perspective: value in px;

We passen perspective toe op het bovenliggende element van een element dat een transformatie heeft. Het bovenliggende element fungeert als een scène voor het getransformeerde element. Om het concept te visualiseren, let op de volgende animatie. De blauwe rand is het bovenliggende element met perspective, en het element binnenin heeft een rotatie.

Laten we oefenen en perspective toevoegen. De opdracht is om perspective toe te voegen aan de bovenliggende elementen (div-element met de classnaam box-border) die kinderen bevatten met een transformatie.

Opmerking

De eigenschap perspective bepaalt hoe ver het object van de gebruiker verwijderd is. Een lagere waarde resulteert dus in een intensiever 3D-effect dan een hogere waarde.