w3docs logo

CSS-Eigenschaft perspective-origin

Die Eigenschaft perspective-origin definiert die Position, an der der Benutzer das 3D-positionierte Element betrachtet.

Die Eigenschaft perspective verwendet den Wert der Eigenschaft perspective-origin als Fluchtpunkt.

Die Eigenschaft perspective-origin funktioniert immer mit der Eigenschaft perspective .

Nur das untergeordnete Element erhält eine perspektivische Ansicht, nicht das Element selbst.

Für maximale Browser-Kompatibilität wird diese Eigenschaft mit der Erweiterung -webkit- verwendet.

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

Syntax

perspective-origin: x-position y-position | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .element1 {
      position: relative;
      height: 150px;
      width: 150px;
      margin-left: 60px;
      border: 1px solid #666;
      -webkit-perspective: 130px; /* Safari 4-8  */
      -webkit-perspective-origin: 50% 50%; /* Safari 4-8  */  
      perspective: 130px;
      perspective-origin: 50% 50%;  
      }
      .element2 {
      padding: 50px;
      position: absolute;
      border: 1px solid #000;
      background-color: #1c87c9;
      background: #8ebf42; 
      -webkit-transform-style: preserve-3d; /* Safari 3-8  */  
      -webkit-transform: rotateX(45deg); /* Safari 3-8  */
      transform-style: preserve-3d;
      transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft perspective-origin</h2>
    <h3>Perspective-origin: 50% 50%:</h3>
    <div class="element1">
      Box1
      <div class="element2">Box2</div>
    </div>
  </body>
</html>

Ein Beispiel mit dem Wert "left":

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .element1 {
      position: relative;
      height: 150px;
      width: 150px;
      margin-left: 20px;
      border: 1px solid #666;
      -webkit-perspective: 80px; /* Safari 4-8  */
      -webkit-perspective-origin: left; /* Safari 4-8  */  
      perspective: 80px;
      perspective-origin: left;  
      }
      .element2 {
      padding: 50px;
      position: absolute;
      border: 1px solid #000;
      background-color: #1c87c9;
      background: #8ebf42; 
      -webkit-transform-style: preserve-3d; /* Safari 3-8  */  
      -webkit-transform: rotateX(45deg); /* Safari 3-8  */
      transform-style: preserve-3d;
      transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft perspective-origin</h2>
    <h3>Perspective-origin: left:</h3>
    <div class="element1">
      Box1
      <div class="element2">Box2</div>
    </div>
  </body>
</html>

Another example where the perspective-origin is specified as "right":

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .element1 {
      position: relative;
      height: 150px;
      width: 150px;
      margin-left: 160px;
      border: 1px solid #666;
      -webkit-perspective: 80px; /* Safari 4-8  */
      -webkit-perspective-origin: right; /* Safari 4-8  */  
      perspective: 80px;
      perspective-origin: right;  
      }
      .element2 {
      padding: 50px;
      position: absolute;
      border: 1px solid #000;
      background-color: #1c87c9;
      background: #8ebf42; 
      -webkit-transform-style: preserve-3d; /* Safari 3-8  */  
      -webkit-transform: rotateX(45deg); /* Safari 3-8  */
      transform-style: preserve-3d;
      transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft perspective-origin</h2>
    <h3>Perspective-origin: right:</h3>
    <div class="element1">
      Box1
      <div class="element2">Box2</div>
    </div>
  </body>
</html>

Ein weiteres Beispiel, wo die Eigenschaft perspective-origin mit dem Wert "bottom right" definiert ist:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .element1 {
      position: relative;
      height: 150px;
      width: 150px;
      margin-left: 60px;
      border: 1px solid #666;
      -webkit-perspective: 130px; /* Safari 4-8  */
      -webkit-perspective-origin: bottom right; /* Safari 4-8  */  
      perspective: 130px;
      perspective-origin: bottom right;  
      }
      .element2 {
      padding: 50px;
      position: absolute;
      border: 1px solid #000;
      background-color: #1c87c9;
      background: #8ebf42; 
      -webkit-transform-style: preserve-3d; /* Safari 3-8  */  
      -webkit-transform: rotateX(45deg); /* Safari 3-8  */
      transform-style: preserve-3d;
      transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft perspective-origin</h2>
    <h3>Perspective-origin: bottom right:</h3>
    <div class="element1">
      Box1
      <div class="element2">Box2</div>
    </div>
  </body>
</html>

Werte

Wert Beschreibung
x-position Gibt die Position der Ansicht in der x-Achse an. Es kann die folgenden Werte haben:
  • left,
  • right,
  • center,
  • length,
  • percentage.
y-position Gibt die Position der Ansicht in der y-Achse an. Es kann die folgenden Werte haben:
  • top,
  • center,
  • bottom,
  • length,
  • percentage.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome firefox safari opera
36.0+
12.0-35.0 -webkit- 		16.0+
10.0-15.0 -moz- 		4.0+
-webkit- 		23.0+
15.0-22.0 -webkit-

Übe dein Wissen

Was beeinflusst die CSS-Eigenschaft 'Perspective-Origin'?
Finden Sie das nützlich?