CSS- perspectief Eigenschap
Voorbeeld
Geef een 3D-gepositioneerd element enig perspectief:
#div1
{
perspective: 100px;
}
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De perspective
eigenschap wordt gebruikt om een 3D-gepositioneerd element enig perspectief te geven.
De perspective
eigenschap definieert hoe ver het object van de gebruiker verwijderd is. Een lagere waarde resulteert dus in een intensiever 3D-effect dan een hogere waarde.
Bij het definiëren van de perspective
eigenschap voor een element, zijn het de CHILD-elementen die de perspectiefweergave krijgen, NIET het element zelf.
Tip: Kijk ook naar de eigenschap perspectief-oorsprong , die definieert op welke positie de gebruiker naar het 3D-object kijkt.
Bekijk een demo om de eigenschap perspectief beter te begrijpen .
Standaardwaarde: | geen |
---|---|
geërfd: | Nee |
Animeerbaar: | Ja. Lees over animeren |
Versie: | CSS3 |
JavaScript-syntaxis: | object .style.perspective="50px" |
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
Getallen gevolgd door -webkit- of -moz- specificeren de eerste versie die met een prefix werkte.
Property | |||||
---|---|---|---|---|---|
perspective | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0.3 -webkit- |
23.0 15.0 -webkit- |
CSS-syntaxis
perspective: length|none;
Eigendomswaarden
Property Value | Description |
---|---|
length | How far the element is placed from the view |
none | Default value. Same as 0. The perspective is not set |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Meer voorbeelden
Voorbeeld
Maak een kubus en stel verschillende perspectieven in:
.ex1 {
perspective: 800px;
}
.ex2 {
perspective: 150px;
}
Gerelateerde pagina's
CSS-zelfstudie: CSS 3D-transformaties
HTML DOM-referentie: perspectiefeigenschap