Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

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]