CSS perspective-Eigenschaft

Die perspective-Eigenschaft verleiht einem 3D-positionierten Element eine Perspektive und bestimmt den Abstand zwischen der z=0-Ebene und dem Betrachter.

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

Die perspective-Eigenschaft akzeptiert einen Längenwert. Null ist gültig, negative Werte werden jedoch als positiv behandelt.

Die perspective-Eigenschaft ist eine der CSS3-Eigenschaften.

INFO

Der Hauptunterschied zwischen der perspective-Eigenschaft und dem Wert perspective() der transform-Eigenschaft besteht im Folgenden: Die perspective-Eigenschaft wirkt sich nicht auf das Element selbst aus; sie wendet lediglich eine Perspektivansicht auf die untergeordneten Elemente an. Die Funktion perspective() hingegen wendet die Tiefe direkt auf das Element an, auf das sie angewendet wird.

INFO

Moderne Browser unterstützen diese Eigenschaft vollständig ohne Vendor-Prefixes.

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

Syntax

CSS-Syntax für perspective

css

perspective: length | none | initial | inherit;

Beispiel für die perspective-Eigenschaft:

CSS-Codebeispiel für perspective

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the element</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>Perspective property example</h2>
    <h3>perspective: none:</h3>
    <div class="element2">
      Box2
      <div class="element1">Box1</div>
    </div>
  </body>
</html>

Try it Yourself »

Ergebnis

CSS perspective with px

Beispiel für die perspective-Eigenschaft mit dem Wert 100px:

CSS-Beispiel für perspective mit px

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the element</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>Perspective property example</h2>
    <h3>perspective: 100px:</h3>
    <div class="element2">
      Box2
      <div class="element1">Box1</div>
    </div>
  </body>
</html>

Try it Yourself »

Werte

Wert	Beschreibung
length	Wendet eine Perspektivtransformation auf das Element und seinen Inhalt an.
none	Wendet keine Perspektivtransformation an.
initial	Legt fest, dass die Eigenschaft ihren Standardwert verwendet.
inherit	Erbt die Eigenschaft vom Elternelement.

Praxis

Was bewirkt die CSS-'perspective'-Eigenschaft?

Sie legt die Farbe eines Elements vorSie bestimmt den Abstand zwischen der z-Ebene und dem BenutzerSie passt den 3D-Raum eines Elements anSie beeinflusst den Dropshadow eines ElementsSie erzeugt ein Tiefengefühl, indem sie die Skalierung eines Elements beeinflusst

CSS perspective-Eigenschaft ​

Syntax ​

Beispiel für die perspective-Eigenschaft: ​

Ergebnis ​

Beispiel für die perspective-Eigenschaft mit dem Wert 100px: ​

Werte ​