CSS/Eigenschaften/äußere Gestaltung/Transformationen/perspective

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Eigenschaft perspective können Sie eine perspektivische Ansicht für eine 3D-Transformation festlegen. Mittels perspective-origin kann der Ausgangspunkt festgelegt werden.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

Details: caniuse.com

Zusätzlich gibt es unter den Transformationen-Funktionen eine gleichnamige perspective()-Funktion.

perspective als Eigenschaft[Bearbeiten]

Die perspective-Eigenschaft bestimmt die Entfernung zwischen der Z-Ebene und dem Betrachter um 3d-Objekten räumliche Tiefe zu geben.

Folgende Angaben sind möglich:

Beachten Sie, dass die perspective-Eigenschaft keinen Einfluss auf die Darstellung des Elements hat, sie liefert nur eine räumliche Dimension für Kindelemente. Dies ist der Unterschied zur transform: perspective()-Funktion, die dem transformierten Element räumliche Tiefe gibt.

3D-Objekte mit z>0 werden größer, Objekte mit z<0 kleiner. 3D-Objekte, deren z-Achsenwert größer ist als der Wert von perspective, befinden sich hinter dem Betrachter und werden deshalb nicht angezeigt.

Der Standardwert für den Fluchtpunkt ist die Mitte des Elements, kann aber durch die perspective-origin-Eigenschaft verändert werden.

Durch die Angabe eines anderen Werts als 0 und none erzeugen Sie einen neuen Stapelkontext (stacking context).

perspective-origin[Bearbeiten]

Die perspective-origin-Eigenschaft legt die Position des Betrachters eines transformierten Elements fest.

Folgende Angaben sind möglich:

  • x-Achse: legt den Wert der (horizontalen) Abszissenachse des Fluchtpunkts fest
    • left
    • center
    • right
    • Wert: eine Längenangabe (Standardwert ist 50%)
  • y-Achse: legt den Wert der Ordinate (vertikale Höhe) fest
    • top
    • center
    • bottom
    • Wert: eine Längenangabe (Standardwert ist 50%)
  • initial:
  • inherit: Wert wird vom Elternelement übernommen

perspective()-Funktion[Bearbeiten]

Die perspective()-Funktion legt eine Perspektiven-Matrix einer Transformation fest.

Folgende Angabe ist nötig:

  • Länge positive Längenangabe in px


Ein höherer Wert lässt das Element weiter weg erscheinen.

Weblinks[Bearbeiten]