CSS perspective-origin Eigenschaft

Definition und Verwendung

Die Eigenschaft perspective-origin definiert die X- und Y-Achse, auf der sich das 3D-Element basiert. Diese Eigenschaft ermöglicht es Ihnen, die Position des unteren Teils des 3D-Elements zu ändern.

Wenn die Eigenschaft perspective-origin für ein Element definiert wird, erhalten die Kinder des Elements die Perspektive, nicht das Element selbst.

Anmerkung:Diese Eigenschaft muss zusammen mit perspektive Eigenschaften, die gemeinsam verwendet werden, und beeinflussen nur die 3D-Transformationselemente.

Siehe auch:

CSS3-Tutorial:CSS3 3D Transformation

HTML DOM Referenzhandbuch:perspectiveOrigin-Eigenschaft

Beispiel

Legen Sie den Ausgangspunktposition der 3D-Elemente fest:

div
{
perspective:150;
perspective-origin: 10% 10%;
}

Versuchen Sie es selbst

CSS-Syntax

perspective-origin: x-Achse y-Achse;

Eigenschaftswert

Wert Beschreibung
x-Achse

Definiert die Position der Ansicht auf der x-Achse. Standardwert: 50%.

Mögliche Werte:

  • links
  • Mitte
  • rechts
  • Länge
  • %
y-Achse

Definiert die Position der Ansicht auf der y-Achse. Standardwert: 50%.

Mögliche Werte:

  • oben
  • Mitte
  • unten
  • Länge
  • %

Technische Details

Standardwert: 50% 50%
Vererbbarkeit: nein
Version: CSS3
JavaScript-Syntax: Objekt.style.perspectiveOrigin="10% 10%"

Browser-Unterstützung

Die Zahlen in der Tabelle weisen auf die erste Browserversion hin, die die Eigenschaft vollständig unterstützt.

Chrome IE / Edge Firefox Safari Opera
36.0
12.0 -webkit-		 10.0 16.0
10.0 -moz-		 9.0
4.0.3 -webkit-		 23.0
15.0 -webkit-