CSS- Perspektive -Eigenschaft
Beispiel
Geben Sie einem in 3D positionierten Element eine Perspektive:
#div1
{
perspective: 100px;
}
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die perspective
Eigenschaft wird verwendet, um einem 3D-positionierten Element eine gewisse Perspektive zu geben.
Die perspective
Eigenschaft definiert, wie weit das Objekt vom Benutzer entfernt ist. Ein niedrigerer Wert führt also zu einem intensiveren 3D-Effekt als ein höherer Wert.
Beim Definieren der perspective
Eigenschaft für ein Element erhalten die CHILD-Elemente die perspektivische Ansicht, NICHT das Element selbst.
Tipp: Sehen Sie sich auch die Eigenschaft perspective-origin an, die definiert, an welcher Position der Benutzer auf das 3D-Objekt blickt.
Um die perspektivische Eigenschaft besser zu verstehen, sehen Sie sich eine Demo an .
Standardwert: | keiner |
---|---|
Vererbt: | Nein |
Animierbar: | ja. Lesen Sie mehr über animierbare |
Ausführung: | CSS3 |
JavaScript-Syntax: | Objekt .style.perspective="50px" |
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
Zahlen gefolgt von -webkit- oder -moz- geben die erste Version an, die mit einem Präfix funktioniert hat.
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-Syntax
perspective: length|none;
Eigenschaftswerte
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 |
Mehr Beispiele
Beispiel
Erstellen Sie einen Würfel und stellen Sie verschiedene Perspektiven ein:
.ex1 {
perspective: 800px;
}
.ex2 {
perspective: 150px;
}
Verwandte Seiten
CSS-Tutorial: CSS-3D-Transformationen
HTML-DOM-Referenz: perspektivische Eigenschaft