CSS perspective-origin Eigenschaft

Die CSS-Eigenschaft perspective-origin legt die Position fest, von der aus der Betrachter scheinbar auf ein 3D-transformiertes Element blickt. Mit anderen Worten: Sie verschiebt den Fluchtpunkt — die Stelle, auf die sich Flächen, die vom Bildschirm weg geneigt sind, scheinbar zubewegen. Sie gehört zu den CSS3-Eigenschaften.

Funktionsweise

Eine 3D-Szene benötigt zwei Bestandteile, um korrekt auszusehen:

Die Eigenschaft perspective, die bestimmt, wie stark der 3D-Effekt ist (je kleiner der Wert, desto dramatischer die Verkürzung).
Die Eigenschaft perspective-origin, die festlegt, wo sich die Kamera befindet. perspective bestimmt die Tiefe des Fluchtpunkts; perspective-origin bestimmt seine horizontale und vertikale Position.

Standardmäßig liegt der Fluchtpunkt genau in der Mitte des Elements (50% 50%), sodass eine gedrehte untergeordnete Fläche symmetrisch wirkt. Das Verschieben von perspective-origin zu einer Seite ist wie das Umrunden des Objekts — dasselbe untergeordnete Element erscheint von links, rechts, oben oder unten betrachtet.

perspective-origin wirkt sich nur aus, wenn perspective ebenfalls gesetzt ist, entweder auf demselben Element oder auf einem Vorfahren. Ohne diese Bedingung wird die Eigenschaft zwar geparst, hat aber keine Wirkung.

Die Zwei-Wert-Syntax liest sich immer erst horizontal, dann vertikal (zum Beispiel perspective-origin: 25% 75%). Wird nur ein Wert angegeben, wird der fehlende Wert standardmäßig auf center gesetzt. Schlüsselwortpaare wie top left sind eine Ausnahme — Schlüsselwörter können in beliebiger Reihenfolge geschrieben werden, da jedes Schlüsselwort eine bestimmte Achse benennt.

Info

perspective-origin wird auf das Elternelement angewendet, bestimmt aber, wie seine untergeordneten Elemente projiziert werden — das Element, auf das es gesetzt wird, wird selbst nicht transformiert.

Anfangswert	50% 50%
Gilt für	Transformierbare Elemente.
Vererbbar	Nein.
Animierbar	Ja. Die Transformation der Perspektive ist animierbar.
Version	CSS3
DOM-Syntax	object.style.perspectiveOrigin = "20px 70%";

Syntax

CSS perspective-origin Syntax

perspective-origin: x-position y-position | x | y | closest-side | farthest-side | initial | inherit;

Beispiel der perspective-origin Eigenschaft:

CSS perspective-origin Code-Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element1 {
        position: relative;
        height: 150px;
        width: 150px;
        margin-left: 60px;
        border: 1px solid #666;
        perspective: 130px;
        perspective-origin: 50% 50%;
      }
      .element2 {
        padding: 50px;
        position: absolute;
        border: 1px solid #000;
        background: #8ebf42;
        transform-style: preserve-3d;
        transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Perspective-origin property example</h2>
    <h3>Perspective-origin: 50% 50%:</h3>
    <div class="element1">
      Box1
      <div class="element2">Box2</div>
    </div>
  </body>
</html>

Probier es selbst »

Ergebnis

Mit dem Standardwert 50% 50% liegt der Fluchtpunkt in der Mitte, sodass Box2 gleichmäßig verkürzt wirkt. In den nächsten Beispielen verschieben wir diesen Punkt an eine Kante und beobachten, wie sich der scheinbare Betrachtungswinkel ändert.

Beispiel der perspective-origin Eigenschaft mit dem Wert „left":

CSS perspective-origin left-Wert Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element1 {
        position: relative;
        height: 150px;
        width: 150px;
        margin-left: 20px;
        border: 1px solid #666;
        perspective: 80px;
        perspective-origin: left;
      }
      .element2 {
        padding: 50px;
        position: absolute;
        border: 1px solid #000;
        background: #8ebf42;
        transform-style: preserve-3d;
        transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Perspective-origin property example</h2>
    <h3>Perspective-origin: left:</h3>
    <div class="element1">
      Box1
      <div class="element2">Box2</div>
    </div>
  </body>
</html>

Probier es selbst »

Beispiel der perspective-origin Eigenschaft mit dem Wert „right":

CSS perspective-origin right-Wert Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element1 {
        position: relative;
        height: 150px;
        width: 150px;
        margin-left: 160px;
        border: 1px solid #666;
        perspective: 80px;
        perspective-origin: right;
      }
      .element2 {
        padding: 50px;
        position: absolute;
        border: 1px solid #000;
        background: #8ebf42;
        transform-style: preserve-3d;
        transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Perspective-origin property example</h2>
    <h3>Perspective-origin: right:</h3>
    <div class="element1">
      Box1
      <div class="element2">Box2</div>
    </div>
  </body>
</html>

Probier es selbst »

Beispiel der perspective-origin Eigenschaft mit dem Wert „bottom right":

CSS perspective-origin bottom Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element1 {
        position: relative;
        height: 150px;
        width: 150px;
        margin-left: 60px;
        border: 1px solid #666;
        perspective: 130px;
        perspective-origin: bottom right;
      }
      .element2 {
        padding: 50px;
        position: absolute;
        border: 1px solid #000;
        background: #8ebf42;
        transform-style: preserve-3d;
        transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Perspective-origin property example</h2>
    <h3>Perspective-origin: bottom right:</h3>
    <div class="element1">
      Box1
      <div class="element2">Box2</div>
    </div>
  </body>
</html>

Probier es selbst »

Werte

Wert	Beschreibung
x-position	Die horizontale Position des Fluchtpunkts. Akzeptiert einen `<length>`-Wert, einen Prozentwert oder eines der Schlüsselwörter `left` (= `0`), `center` (= `50%`) oder `right` (= `100%`).
y-position	Die vertikale Position des Fluchtpunkts. Akzeptiert einen `<length>`-Wert, einen Prozentwert oder eines der Schlüsselwörter `top` (= `0`), `center` (= `50%`) oder `bottom` (= `100%`).
initial	Setzt diese Eigenschaft auf ihren Standardwert (`50% 50%`).
inherit	Erbt diese Eigenschaft vom Elternelement.

Prozent- und Längenwerte werden relativ zur eigenen Box des Elements aufgelöst, mit dem Ursprung in der oberen linken Ecke. 0 0 setzt den Fluchtpunkt also oben links, 100% 100% unten rechts. Negative Werte oder Werte über 100 % sind erlaubt, um die Kamera außerhalb der Box zu positionieren.

Browser-Unterstützung

perspective-origin wird von allen modernen Browsern unterstützt. Vendor-Präfixe wie -webkit-perspective-origin sind für aktuelle Versionen von Chrome, Edge, Firefox und Safari nicht mehr erforderlich.

Übung

Was bewirkt die CSS-Eigenschaft 'perspective-origin'?

Sie definiert die Position des Fluchtpunkts für 3D-Transformationen.Sie legt die Hintergrundfarbe eines Elements fest.Sie bestimmt den Ursprung des 3D-Raums, also den Ausgangspunkt der Perspektive entlang der x- und y-Achse.Sie verändert die Größe eines Elements.Sie steuert, wie die Schriftgröße skaliert werden soll.

Funktionsweise

Syntax

Beispiel der perspective-origin Eigenschaft:

Ergebnis

Beispiel der perspective-origin Eigenschaft mit dem Wert „left":

Beispiel der perspective-origin Eigenschaft mit dem Wert „right":

Beispiel der perspective-origin Eigenschaft mit dem Wert „bottom right":

Werte

Browser-Unterstützung

Verwandte Eigenschaften

Übung