W3docs
de
Anmelden

CSS perspective-Eigenschaft

Verwende die CSS-Eigenschaft perspective, um einem 3D-Element eine Perspektive zu geben. Werte und Beispiele.

Die Eigenschaft perspective legt fest, wie weit der Betrachter von der z = 0-Ebene der 3D-Kinder eines Elements entfernt ist. Im Klartext steuert sie, wie stark der 3D-Effekt wirkt: Sie verwandelt eine flache Rotation in etwas, das in den Bildschirm zurückzuweichen scheint – so wie Objekte im echten Leben kleiner werden, wenn sie sich vom Auge entfernen.

Sie wird auf einem übergeordneten Element gesetzt. Der Wert ist der simulierte Abstand vom Betrachter zum Bildschirm. Kleinere Werte (wie 100px) platzieren den Betrachter sehr nah, sodass die Perspektive dramatisch und übertrieben wirkt. Größere Werte (wie 1000px) platzieren den Betrachter weit entfernt, sodass der Effekt subtil und nahezu flach ist. Diese Seite erklärt das Verhalten der Eigenschaft und zeigt den Unterschied zwischen none und einer echten Längenangabe.

Da das Kindelement im 3D-Raum liegt, erscheinen Teile mit z > 0 näher am Betrachter und damit größer, während Teile mit z < 0 weiter entfernt und damit kleiner erscheinen.

Wann verwende ich das?

perspective wird immer dann eingesetzt, wenn ein Element in 3D rotiert wird (mit transform: rotateX(), rotateY() oder translateZ()) und diese Rotation wie echte Tiefe wirken soll statt wie eine flache Scherung. Typische Anwendungsfälle sind Flip-Cards, 3D-Würfel und Karussells sowie Kippeffekte beim Hovern.

Die Eigenschaft perspective akzeptiert eine einzelne <length>. Null ist gültig (deaktiviert den Effekt wie none), negative Werte sind nicht erlaubt – sie werden als ungültig behandelt und ignoriert.

Um zu steuern, wo der Fluchtpunkt liegt (die Position, auf die der Betrachter schaut), kombiniere diese Eigenschaft mit perspective-origin. Für die 3D-Rotationen selbst siehe die Eigenschaft transform, und um verschachtelte Kinder im selben 3D-Raum zu halten, verwende transform-style.

Die Eigenschaft perspective ist eine der CSS3-Eigenschaften.

Info

perspective-Eigenschaft vs. die perspective()-Transformationsfunktion. Die Eigenschaft perspective hat keinen Einfluss auf das Element, auf dem sie gesetzt ist – sie wendet nur eine Perspektivansicht auf die 3D-transformierten Kinder dieses Elements an. Der Wert perspective() innerhalb der Eigenschaft transform wendet Tiefe direkt auf das Element selbst an. Verwende die Eigenschaft, wenn mehrere Kinder eine gemeinsame Betrachterposition teilen; verwende die Funktion, wenn ein einzelnes Element eine eigene Tiefe benötigt.

Info

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

Initial Valuenone
Applies toTransformierbare Elemente.
InheritedNein.
AnimatableJa. Die Transformation der Perspektive ist animierbar.
VersionCSS3
DOM Syntaxobject.style.perspective = "70px";

Syntax

CSS perspective-Syntax

perspective: length | none | initial | inherit;

Beispiel ohne Perspektive (perspective: none)

Mit perspective: none am übergeordneten Element wird das rotateX(40deg) des Kindes als flache 2D-Scherung gerendert – es entsteht kein Tiefeneindruck. Dies ist der Ausgangswert zum Vergleich.

CSS perspective-Codebeispiel

<!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>
Probier es selbst »

Ergebnis

CSS perspective mit px

Beispiel mit perspective: 100px

Jetzt erhält das übergeordnete Element eine perspective von 100px. Da der Betrachter sehr nah simuliert wird, wirkt das gleiche rotateX(40deg) am Kind wie echte Tiefe – die Oberkante zieht sich in den Bildschirm zurück und der Kasten wirkt im 3D-Raum geneigt. Erhöht man den Wert auf 500px oder 1000px, wird die Neigung sanfter.

CSS perspective mit px-Beispiel

<!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>
Probier es selbst »

Werte

ValueDescription
lengthWendet eine Perspektivtransformation auf das Element und seinen Inhalt an.
noneWendet keine Perspektivtransformation an.
initialSetzt die Eigenschaft auf ihren Standardwert.
inheritErbt die Eigenschaft vom übergeordneten Element.

Häufige Fehler

  • Am übergeordneten Element setzen, nicht am rotierten Element. Ein verbreiteter Fehler ist, perspective auf demselben Element zu setzen, das rotiert wird – das hat keine Wirkung. Verschiebe es entweder auf das übergeordnete Element oder verwende die Funktion perspective() innerhalb von transform direkt am Element.
  • Reihenfolge ist wichtig bei der perspective()-Funktion. Wenn du die Funktion verwendest, schreibe sie zuerst: transform: perspective(500px) rotateX(40deg). Steht sie nach der Rotation, wird sie auf ein bereits rotiertes Koordinatensystem angewendet und das Ergebnis ändert sich.
  • Verschachtelte 3D-Elemente benötigen transform-style: preserve-3d. Ohne diese Angabe (der Standard ist flat) werden Kindeskinder in die Ebene ihres Elternelements geglättet und die Tiefe geht verloren.

Verwandte Eigenschaften

  • perspective-origin — legt die Position des Fluchtpunkts fest.
  • transform — wendet die 3D-Rotationen und -Verschiebungen an, denen perspective Tiefe verleiht.
  • transform-style — hält verschachtelte Elemente im gemeinsamen 3D-Raum.
  • backface-visibility — verbirgt die Rückseite eines Elements, wenn es vom Betrachter wegrotiert wird.

Übung

Übung
Was macht die CSS-Eigenschaft 'perspective'?
Was macht die CSS-Eigenschaft 'perspective'?
Was this page helpful?