De perspectiveCSS-eigenschap geeft een element een 3D-ruimte door de afstand tussen het Z-vlak en de gebruiker te beïnvloeden.
De sterkte van het effect wordt bepaald door de waarde. Hoe kleiner de waarde, hoe dichter u van het Z-vlak komt en hoe indrukwekkender het visuele effect. Hoe groter de waarde, hoe subtieler het effect zal zijn.
Belangrijk: houd er rekening mee dat de eigenschap perspectief geen invloed heeft op hoe het element wordt weergegeven; het maakt eenvoudig een 3D-ruimte voor kinderelementen mogelijk. Dit is het belangrijkste verschil tussen de transform: perspective()functie en de perspectiveeigenschap. De eerste geeft element diepte, terwijl de laatste een 3D-ruimte creëert die gedeeld wordt door al zijn getransformeerde kinderen.
/** * Syntax * perspective: none | */ .parent ( perspective: 1000px; ) .child ( transform: rotateY(50deg); ) De bovenstaande demo is bedoeld om het verschil tussen de functie en de eigenschap te laten zien.
- Aan de linkerkant kunt u de eigenschap zien die is toegepast op de ouder (
perspective: 50em) van getransformeerde elementen (transform: rotateY(50deg)). - Aan de rechterkant wordt het perspectief vanuit de transformatie rechtstreeks op kinderen toegepast (
transform: perspective(50em) rotateY(50deg)).
Dit laat zien hoe het perspectief van de ouder ervoor zorgt dat alle kinderen dezelfde 3D-ruimte delen en dus hetzelfde verdwijnpunt.
Laten we iets nog coolers proberen: een kubus met 3D-transformaties en perspectief.
Hier is hoe de kubus is gemaakt: hij vertrouwt op twee geneste wikkels (één om de kubus perspectief te geven en één om alle zijkanten in te pakken) en 6 elementen om de zijkanten te maken. Elk element krijgt zijn eigen transformatie door het vertalen en roteren in de 3D-ruimte (bv. transform: rotateX(90deg) translateZ(1em)).
Laten we eindigen met een demo met wat de basis zou kunnen zijn van een echt ontwerp: een muur met foto's + bijschriften met perspectief en transformatie.
Als ze over de muur zweven, worden de kinderen teruggedraaid naar hun normale positie, waardoor het effect wordt opgeheven.
Belangrijk! Door perspectief te gebruiken (met een andere waarde dan 0 of geen), wordt een nieuwe stapelcontext gecreëerd.
Browser-ondersteuning
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| 12+ | Ieder | 10+ | Geen | 10+ | 3+ | Ieder |
Firefox 10-15 heeft -moz- nodig, WebKit-browsers hebben mogelijk -webkit- nodig