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.

Inhaltsverzeichnis

[Bearbeiten] perspective als Eigenschaft

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).

[Bearbeiten] perspective-origin

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

[Bearbeiten] perspective()-Funktion

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.



Achtung!

Die Eigenschaft perspective ist derzeit (Stand: August 2016) noch nicht in alle aktuelle Browser implementiert, deshalb muss man proprietäre Eigenschaften verwenden:
für Android-Browser -webkit-perspective

Details: caniuse.com

Sie sollten bei der Definition solcher noch nicht umfassend verbreiteter Eigenschaften die herstellerspezifischen Angaben immer vor der standardisierten Form machen. Da später gemachte Angaben frühere überschreiben, ist so sichergestellt, dass die standardisierten Angaben von dem Zeitpunkt an, an dem sie unterstützt werden, auch verwendet werden.

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML