perspective

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

Die perspective CSS-Eigenschaft bestimmt den Abstand zwischen der z=0-Ebene und dem Benutzer, um einem 3D-positionierten Element eine Perspektive zu geben.

Probieren Sie es aus

perspective: none;

perspective: 800px;

perspective: 23rem;

perspective: 5.5cm;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <div class="face front">1</div>
    <div class="face back">2</div>
    <div class="face right">3</div>
    <div class="face left">4</div>
    <div class="face top">5</div>
    <div class="face bottom">6</div>
  </div>
</section>

#default-example {
  background: linear-gradient(skyblue, khaki);
  perspective: 800px;
  perspective-origin: 150% 150%;
}

#example-element {
  width: 100px;
  height: 100px;
  perspective: 550px;
  transform-style: preserve-3d;
}

.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  color: white;
}

.front {
  background: rgba(90, 90, 90, 0.7);
  transform: translateZ(50px);
}

.back {
  background: rgba(0, 210, 0, 0.7);
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgba(210, 0, 0, 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgba(0, 0, 210, 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgba(210, 210, 0, 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgba(210, 0, 210, 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

Syntax

css
/* Keyword value */
perspective: none;

/* <length> values */
perspective: 20px;
perspective: 3.5em;

/* Global values */
perspective: inherit;
perspective: initial;
perspective: revert;
perspective: revert-layer;
perspective: unset;

Werte

none

Gibt an, dass keine Perspektiventransformation angewendet werden soll.

<length>

Ein <length>, das die Entfernung vom Benutzer zur z=0-Ebene angibt. Es wird verwendet, um eine Perspektiventransformation auf die Kinder des Elements anzuwenden. Negative Werte sind Syntaxfehler. Wenn der Wert kleiner als 1px ist, wird er auf 1px begrenzt.

Beschreibung

Jedes 3D-Element mit z>0 wird größer; jedes 3D-Element mit z<0 wird kleiner. Die Stärke des Effekts wird durch den Wert dieser Eigenschaft bestimmt. Große Werte von perspective verursachen eine kleine Transformation; kleine Werte von perspective verursachen eine große Transformation.

Die Teile der 3D-Elemente, die sich hinter dem Benutzer befinden – das heißt, deren z-Achsenkoordinaten größer sind als der Wert der perspective CSS-Eigenschaft – werden nicht gezeichnet.

Der Fluchtpunkt befindet sich standardmäßig in der Mitte des Elements, seine Position kann jedoch mit der perspective-origin-Eigenschaft geändert werden.

Die Verwendung dieser Eigenschaft mit einem anderen Wert als none erstellt einen neuen Stacking-Kontext. In diesem Fall wird das Objekt auch als enthaltender Block für position: fixed-Elemente fungieren, die es enthält.

Formale Definition

Anfangswertnone
Anwendbar auftransformierbare Elemente
VererbtNein
Berechneter Wertdie absolute Länge oder none
AnimationstypLängenangabe
Erstellt StapelkontextJa

Formale Syntax

perspective = 
  none            |
  <length [0,∞]>

Beispiele

Perspektive einstellen

Ein Beispiel, das zeigt, wie ein Würfel variiert, wenn die perspective an verschiedenen Positionen eingestellt wird, finden Sie unter Verwenden von CSS-Transformationen > Perspektive einstellen.

Spezifikationen

Specification
CSS Transforms Module Level 2
# perspective-property

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch