CSS-Eigenschaft perspective

❮ Vorige Nächste ❯

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>

Versuch es selber!

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>

Versuch es selber!

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.