CSS-Eigenschaft perspective

Die Eigenschaft perspective gibt einem 3D-positionierten Element etwas Perspektive und bestimmt den Abstand zwischen der z=0-Ebene.

Ein 3D-Element mit z>0 wird größer, ein 3D-Element mit z<0 wird kleiner.

Die Eigenschaft perspective nimmt keine 0 oder negativen Werte an.

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 none
Gilt für Transformierbare Elemente
Geerbt Nein
Animierbar Ja, die Transformation der Perspektive ist animierbar.
Version CSS3
DOM Syntax object.style.perspective = "70px";

Syntax

perspective: length | none | initial | inherit;

Beispiel

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

Ein weiteres Beispiel, bei dem die Perspektive als 100px angegeben ist:

Beispiel

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

Werte

Wert Beschreibung
length Wendet eine perspektivische Transformation auf das Element und seinen Inhalt an.
none Wendet keine perspektivische Transformation an.
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 bewirkt die CSS-Eigenschaft 'perspective'?
Finden Sie das nützlich?